锋利的jquery书中的疑惑

Question

<div class= "box">
    <ul class = "menu">
        <li class="level1">
            <a href="#href">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤 </a></li>
                <li><a href="#none">长袖T恤 </a></li>
            </ul>
        </li>

        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>

        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>

<script type="text/javascript">
    $(".level1>a").click(function(){
        $(this).addClass("current")
        .next().show()
        .parent().siblings().children("a").removeClass("current")
        .next().hide();
        return false;
    })
</script>

功能是点击链接，该链接下面的ul就会显示出来。我的问题就是这个.next().hide()，不能理解这个语句是怎么把其他列表项都隐藏的。。。。。

Answer 1

谢邀啊，好像你老邀我。
告诉你一个方法，你把这个jquery长链拆开书写，然后分别打印。就知道每一步是作用在哪些元素上了。
比如：

    $(".level1>a").click(function(){
        var a = $(this).addClass("current");
        consol.log(a);
        var b = a.next().show();
        consol.log(b);
        var c =b .parent().siblings().children("a").removeClass("current");
        console.log(c);
        var d =c.next().hide();
        console.log(d);
        return false;
    })

Answer 2

没看过这书，jquery用的不多，尝试解答一下，

.parent().siblings()

这里的parent是单个li元素 然后选择他的其他兄弟节点，也就是说是其他的两个li,那么这里就会返回多个对象（一个jquery对象，他帮你把符合条件的对象都封装进去了），
然后对这两个li 分别执行

children("a").removeClass("current")
        .next().hide();

也就是说到这里会分离出两条路线出来，把这两个li下面的a删除一个class，并让a下面的ul列表隐藏

希望能帮到你

Answer 3

逐步解释下，首先，下面的代码就是当前点击的a添加current这个class并且让a下面的ul(.level2)显示

$(this).addClass("current").next().show()

然后找到这个ul的父级元素，就是li(.level1)

$(this).addClass("current").next().show().parent()

然后找到这个li的兄弟节点，就是另外的两个li(.level1)

$(this).addClass("current").next().show().parent().siblings()

然后找到另外两个li(.level1)的子a元素,并且删除a的类名(current)

$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current")

然后找到a下面的ul(.level2)。并且隐藏

$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();

Answer 4

这种东西去查文档，看返回值。