javascript - jquery如何选取除当前元素的其他非同辈元素（类名相同）

问题描述

问 题

我就是想实现点击当前图标出来菜单，但是其他的菜单隐藏（未实现），再次点击图标当前菜单隐藏（已实现）

下面我这么写没用。。

解决方案

按照你需要的功能写了个简单的例子

HTML

<ul class="menu">
   <li>
        1
        <div>我是 菜单1 的子菜单</div>
   </li>
   <li>
        2
        <div>我是 菜单2 的子菜单</div>
   </li>
   <li>
        3
        <div>我是 菜单3 的子菜单</div>
   </li>
</ul>

CSS

.menu{width: 300px;margin: 100px auto;cursor: pointer;}
.menu li{font-size: 25px;width: 50px;height: 50px;line-height: 50px;text-align: center;border: 1px solid;position: relative}
.menu li div{width: 200px;height: 50px;border: 1px solid; font-size: 14px;position: absolute;left: 51px;top: -1px;display: none}

JS

var li = $('.menu li');
    li.click(function(){
        var n = li.index($(this));
        $('.menu li:not(:eq('+n+'))').find('div').hide();
        $(this).find('div').toggle();
    });

这篇关于javascript - jquery如何选取除当前元素的其他非同辈元素（类名相同）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！