-2

これに基づいてトグルを構築しようとしていますhttp://jsfiddle.net/Adib/fZc3L/ 問題は、クリックで切り替える適切な兄弟がまだ見つからないことです。

<aside class="aside">
    <div class="element">
        <header><a href="#Cat1">Categorys</a></header>
        <section>
            <ul>
                <li><a href="">Category 1</a></li>
                <li><a href="">Category 2</a></li>
                <li><a href="">Category 3</a></li>
                <li><a href="">Category 4</a></li>
                <li><a href="">Category 5</a></li>
            </ul>
        </section>
    </div>
    <div class="element">
        <header><a href="#Cat1">Categorys:</a></header>
        <section>
            <ul>
                <li><a href="">Category 1</a></li>
                <li><a href="">Category 2</a></li>
                <li><a href="">Category 3</a></li>
                <li><a href="">Category 4</a></li>
                <li><a href="">Category 5</a></li>
            </ul>
        </section>
    </div>
    <div class="element">
        <header><a href="#Cat1">Categorys:</a></header>
        <section>
            <ul>
                <li><a href="">Category 1</a></li>
                <li><a href="">Category 2</a></li>
                <li><a href="">Category 3</a></li>
                <li><a href="">Category 4</a></li>
                <li><a href="">Category 5</a></li>
            </ul>
        </section>
    </div>
</aside>

完全なコードを参照してください http://jsfiddle.net/Adib/PPmLe/

ありがとう。

4

4 に答える 4

1

あなたのセクションは兄弟ではありません。あなたはこれを行うことができます

cat.on('click', function() {
    var $this = $(this),
        section = $this.parent('header').next('section');        
        section.slideDown();
        $('.element section').not(section).slideUp(); // all sections but current one slide up
})

http://jsfiddle.net/HVNJ2/

于 2012-10-24T16:06:56.533 に答える
1

あなたが達成したいことを 100% 明確にしているわけではありませんが、1 つのカテゴリだけが開かれていることを確認することだと思います。だから私はあなたのコードを修正しました：

cat.on('click', function() {
    var $this = $(this),
        section = $this.parent('header').next('section');

    // hide open categories
    $('aside section').slideUp();
    // open clicked category
    section.slideDown();
})

完全なソリューションをご覧ください: http://jsfiddle.net/jkeyes/PPmLe/2/

アップデート

以下は私が問題を解決する方法です。現在のセクション以外のすべてのセクションを非表示にするのではなく、どのセクションが表示されているかを保存する必要があるため、そのセクションを具体的に非表示にするのは簡単です。

$(function() {
    // hide all sections except the first
    $('.element section:not(:first)').hide();

    // store what section is visible
    var visible_section = $('.element section:first');

    $('.element header > a').click(function() {
        // hide the visible section
        visible_section.slideUp();
        // show the current section
        var section = $(this).parent().next('section');
        section.slideDown();
        // update the new visible section
        visible_section = section;
    })
});​
于 2012-10-24T16:06:06.277 に答える
0

私が作成したこのjsFiddleを試してください：http：//jsfiddle.net/PPmLe/8/

スクリプトと私のスクリプトの主な違いは次のとおりです。

 $this.parents('.element').siblings().find('section').slideUp();
于 2012-10-24T16:30:34.427 に答える
0

1 つのセクションのみを示す別のソリューションを次に示します。

$(function() {
    $("header a").click(function(event) {
        event.preventDefault();
        $("section").hide();
        $(this).parent().next("section").show();
    });

    $("section").not(".first").hide();
});​

http://jsfiddle.net/PPmLe/3/

于 2012-10-24T16:09:21.550 に答える