切換下拉答案的三角形

我是Javascript的新手，我有我在互聯網上找到的代碼，可以正常工作的下拉式常見問題解答文件。我無法解決的是如何調整它以顯示切換三角形 - 通常指向正確，當答案下降時指向下方（如在此處http://www.facebook.com/help/182071178590498/）。切換下拉答案的三角形

的主要代碼是這樣的：

<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>

整個頁面可以在這裏看到

http://contemporaryenergy.co.uk/faqs.htm：

<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>

的常見問題及解答一個DL行+這個重複元素工作

任何建議將受到感謝。 Patrick

來源

2013-03-07 user2145089

請考慮在發佈一個[JS提琴]（http://jsfiddle.net/），而不是期待我們瀏覽您網站的文件並在JavaScript控制檯中工作;幫助我們幫助你，讓我們爲你提供幫助。 – 2013-03-07 16:40:08

拿了點。我不僅是Javascript的新手，但這是我第一次嘗試在這個論壇上獲得幫助，並且還沒有完全掌握相關的論壇禮儀。 – user2145089 2013-03-08 11:57:23

我沒有看你的代碼，但通常你通過設置一個額外的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

切換下拉答案的三角形

回答

相關問題