-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

我不是 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;
    })
});​
于 2012-10-24T16:06:06.277 回答
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 回答
0

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

$(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 回答
0

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

您的脚本和我的脚本之间的主要区别是：

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