드롭 다운 답변에서 삼각형 전환

나는 Javascript의 초보자입니다. 인터넷에서 확인을위한 드롭 다운 FAQ 파일을 찾았습니다. 내가 해결할 수없는 것은 토글 삼각형을 표시하는 데이를 적용하는 방법입니다. 일반적으로 포인트를 지정하고 대답이 내려지면 포인트를 지정합니다 (여기 http://www.facebook.com/help/182071178590498/). 전체 페이지드롭 다운 답변에서 삼각형 전환

http://contemporaryenergy.co.uk/faqs.htm 여기에서 볼 수 있습니다

<dl id="faq"> 
<dt> 
What are the benefits of solar energy? 
</dt> 
<dd><p> 
When you <a href="installations.htm">install Solar water heating</a> in your home, you will reduce your impact on the environment. The system will pay for itself whilst reducing your fuel bills. 
</p></dd>

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
    $('#faq').find('dd').hide().end().find('dt').click(function() { 
     $(this).next().slideToggle('slow'); 
    }); 
}); 
    </script> 
    <style type="text/css"> 
#faq { 
    width: 100%; 
} 
#faq dt { 
    color: #2763A5; 
    cursor: pointer; 
    margin: 8px 0; 
    padding: 0; 
} 
#faq dd { 
    border: 1px solid #BABAC0; 
    padding: 0; 
    margin: 0; 
    background-color: #FFFFE1; 
} 
#faq dd p { 
    padding: 10px; 
    margin: 0; 
} 
    </style>

FAQ를 답변을 한 DL 라인 +이 반복 요소와 함께 작동 :

주요 코드는 이것이다

의견을 보내 주시면 감사하겠습니다. 패트릭

출처

2013-03-07 user2145089

A [JS 바이올린을 게시 고려하시기 바랍니다 제거 ] (http://jsfiddle.net/)를 방문하는 것이 아니라 사이트의 파일을 탐색하고 자바 스크립트 콘솔에서 작업 할 것을 기대합니다. 우리가 당신을 도울 수 있도록 도와 주시고, 우리가 당신을 도울 수 있도록하십시오. –

포인트가 찍혔습니다. 저는 Javascript에 익숙하지 않았지만이 포럼에 대한 도움을 얻으려는 첫 번째 시도이며 관련 포럼 에티켓을 아직 완전히 이해하지 못했습니다. – user2145089

나는 당신의 코드를 보지 않았지만 일반적으로 여분의 CSS 클래스를 설정하여 이것을 해결했다. 기본 클래스가 될 수있다 :

.item { 
    background-image: url("triangle.png"); 
}

는 그런 다음 추가/(당신이 스프라이트를 사용하는 경우) 배경 이미지를 대체하거나 상쇄 클래스

.item.open { 
    background-image: url("triangle-open.png"); 
    // or 
    background-position: 0 -50px; 
}

출처

2013-03-07 16:44:34 Halcyon

드롭 다운 답변에서 삼각형 전환

답변

관련 문제