Question

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

常见问题解答和答案适用于一条dl行+此重复元素：

    <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

我们将非常感激地收到任何建议。帕特里克

Answer 1

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

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

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

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

在下拉答案上切换三角形

1 个答案: