0

我是 Javascript 的新手，我在互联网上找到了一个可以正常工作的下拉常见问题解答文件的代码。我无法解决的是如何调整它以显示切换三角形 - 正常指向右侧，当答案下降时指向下方（如此处http://www.facebook.com/help/182071178590498/）。

主要代码是这样的：

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

FAQs and answers 与一个 dl line + 这个重复元素一起工作：

    <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

任何建议将不胜感激。帕特里克

4

1 回答 1

0

我没有看你的代码，但通常你通过设置一个额外的 CSS 类来解决这个问题。您的默认课程可能是：

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

然后添加/删除替换或偏移背景图像的类（如果您使用的是精灵）

.item.open {
    background-image: url("triangle-open.png");
    // or
    background-position: 0 -50px;
}
于 2013-03-07T16:44:34.567 回答