0

クリックするとコンテンツをスライドトグルするこのjqueryコードがあります。このコードは機能します。もっと簡単な方法があるかどうかを知りたいだけです。運が悪かったのでslice（）を試しました。切り替えたいアイテムごとにコードを記述せずに、これを行う方法を見つけようとしています。

ありがとう、

ケビン

    <script type="text/javascript">
    $("div.accord_panel").hide();
    $(document).ready(function () {
        $("p.accord_header:eq(0)").click(function () {

            $("div.accord_panel:eq(0)").slideToggle("slow");
            $("div.accord_panel:eq(1)").hide();
            $("p.accord_header:eq(1)").show();
        });
        $("p.accord_header:eq(1)").click(function () {
            $("div.accord_panel:eq(1)").slideToggle("slow");
            $("p.accord_header:eq(0)").show();
            $("div.accord_panel:eq(0)").hide();
        });

    });
</script>

そしてCSS：

    p.accord_header
    {
        margin: 0;
        padding: 0;
        font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
        color: #615E5A;
        font-size: 9pt;
        font-weight: bold;
        background-color: #f3f0ed
    }
    div.accord_panel
    {
        margin: 0;
        padding: 0;
        font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
        color: #615E5A;
        font-size: 9pt;
        display: none;
        background-color: #f3f0ed
    }

およびHTML：

<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br />
<br />
</strong></p>
<strong>
</strong>
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br />
<br />
<br />
Julie Thomas // 425.881.6185</span><br />
</strong>
</div>
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br />
<br />
</strong></p>
<strong>
</strong>
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br />
<br />
<br />
Julie Thomas // 425.881.6185</span><br />
4

2 に答える 2

1

これがあなたの答えです。Jquery Tools、使いやすく軽量。

于 2011-03-08T19:45:12.940 に答える
1

イベント引数をクリック関数に渡すだけで、event.targetプロパティを使用してクリックされた要素を取得し、.accord_panelその要素の次の兄弟を取得して、すべてのパネル要素を上にスライドさせた後に下にスライドさせることができます。

$("p.accord_header").click(function(e) {
    $("div.accord_panel").stop(true, false).slideUp();
    $(e.target).closest('p').next('.accord_panel').stop(true, false).slideDown();
});

これは、任意の数のヘッダーとパネルで機能します。

こちらの例を参照してください。

于 2011-03-08T19:55:01.673 に答える