javascript - jquery列表隐藏显示怎么进行遍历？-PHP中文網路問答

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

<ul class="navlist">
    <li><a href="#">店铺设置</a></li>
    <li>
        <a href="#">销售订单</a>
        <p class="postion-right"><i class="fa fa-minus-square-o" aria-hidden="true"></i></p>
        <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>
        <p class="postion-right"><i class="fa fa-minus-square-o" aria-hidden="true"></i></p>
        <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').on('click', function(){ var el = $(this); if (el.hasClass('fa-minus-square-o')) { el.removeClass('fa-minus-square-o').addClass('fa-plus-square-o'); $(this).parent().siblings(".nav-menu").hide("100"); } else { el.removeClass('fa-plus-square-o').addClass('fa-minus-square-o'); $(this).parent().siblings(".nav-menu").show("100"); } });