javascript - jquery列表隐藏显示怎么进行遍历？

问题描述

问 题

这个问题是，点击i标签的图标时，li列表里面有两个class=nav-menu同时隐藏显示，这个问题很头疼。这个jquery怎么能进行遍历并能够单独隐藏显示一个指定class？

<ul class="navlist">
    <li><a href="#">店铺设置</a></li>
    <li>
        <a href="#">销售订单</a>
        <div class="postion-right"><i class="fa fa-minus-square-o" aria-hidden="true"></i></div>
        <ul class="nav-menu">
            <li><a href="#">上架产品</a></li>
            <li><a href="#">下架产品</a></li>
        </ul>
    </li>
    <li><a href="#">订单管理</a></li>
    <li>
        <a href="#">产品管理</a>
        <div class="postion-right"><i class="fa fa-minus-square-o" aria-hidden="true"></i></div>
        <ul class="nav-menu">
            <li><a href="#">添加产品</a></li>
            <li><a href="#">产品列表</a></li>
        </ul>
    </li>
</ul>

$('.postion-right i').on('click', function(){
    var el = $(this);
    if(el.hasClass('fa-minus-square-o')){
        el.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
        $(".nav-menu").each(function () {
            $(this).hide("100");
        })
    }else{
        el.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
        $(".nav-menu").each(function () {
            $(this).show("100");
        })
    }
});

解决方案

姑且猜测你是想点击.postion-right i之后让当前.postion-right i下面的ul.nav-menu 显示隐藏。。那么你需要把

        $(".nav-menu").each(function () {
            $(this).show("100");
        })

替换为

$el.closest('li').find('ul').show();

从.postion-right i找到上级的li再找到下级ul。。。。

另外从性能方面考虑，jq的选择器要遵循id>tag>name>class>attribute来使用

再另外，使用$(".nav-menu").each(fn(index))的时候一般是根据这组元素的index（标识）来处理某一项内容。。。否则$(".nav-menu").show()，这样jq就可以帮你处理全部元素了

这篇关于javascript - jquery列表隐藏显示怎么进行遍历？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！