0

私は Javascript の初心者です。問題なく動作するドロップダウン FAQ ファイルのコードをインターネットで見つけました。私がうまくいかないのは、トグル三角形を表示するように適応させる方法です-通常は右を指し、答えが下がったら下を指します（ここ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>

FAQ と回答は、1 つの 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

どんな提案もありがたく受け取られます。パトリック

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 に答える