切换下拉答案的三角形

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

切换下拉答案的三角形

回答

相关问题