Question

我正在尝试基于此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/

谢谢。

Answer 1

我并不是100％清楚你想要实现的目标，但我认为只有确保一个类别是开放的。所以我修改了你的代码：

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;
    })
});

Answer 2

你的部分不是兄弟姐妹。你可以这样做

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/

Answer 3

这是另一个只显示一个部分的解决方案。

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

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

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

Answer 4

试试我创建的这个jsFiddle：http://jsfiddle.net/PPmLe/8/

您的脚本与我的主要区别在于：

 $this.parents('.element').siblings().find('section').slideUp();

在jQuery中构建一个切换

4 个答案: