javascript - 锋利的jquery书中的疑惑

问题描述

问 题

<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()，不能理解这个语句是怎么把其他列表项都隐藏的。。。。。

解决方案

首先你要明白$(this).parent().siblings()是什么，是除去当前a标签的父级li标签外的所有li标签。

然后这些li标签的children("a").next()是什么，是这些li标签中的ul标签。

然后让这些ul标签hide()，所以除了当前点击的a标签的兄弟标签ul外，其他a标签的兄弟标签ul都隐藏了

这篇关于javascript - 锋利的jquery书中的疑惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！