jQuery示例 | 分级菜单

Title

.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}

标题一

内容

标题二

内容

    <div class="item">
        <div class="header">标题三</div>
        <div class="content hide">内容</div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.header').click(function(){    //为标签绑定事件，添加匿名函数
        // 思路：
        // 当前点击的标签 $(this)
        // 获取某个标签的下一个标签
        // 获取某个标签的父标签
        // 获取所有的兄弟标签
        // 添加样式和移除样式

        // 正文：
        // $(this).next().removeClass('hide');
        // $(this).parent().siblings().find('.content').addClass('hide')
        // 链式编程：
        $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

    })
</script>

posted on
2019-04-29 15:47 
CRIME 
阅读(...) 
评论(...) 
编辑 
收藏