操作相同类名的一组数组标签,不用考虑是否为一组兄弟标签
html部分
<ul class="menu">
<li>
<div>我是 菜单1 的子菜单</div>
</li>
<li>
<div>我是 菜单2 的子菜单</div>
</li>
<li>
<div>我是 菜单3 的子菜单</div>
</li>
</ul>
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();
});
使用weUI的实际例子
html部分
<li>
<span class="left">
<i></i>
<span>微信支付</span>
</span>
<div class="right icon_sp_area">
<i class="weui_icon_circle"></i>
</div>
</li>
<li>
<span class="left">
<i></i>
<span>货到付款</span>
</span>
<div class="right icon_sp_area">
<i class="weui_icon_circle"></i>
</div>
</li>
js部分
var radioArr = $(".icon_sp_area .weui_icon_circle");
radioArr.click(function () {
var n = radioArr.index($(this));
$(this).removeClass('weui_icon_circle').addClass('weui_icon_success');
$('.icon_sp_area i:not(:eq('+n+'))').removeClass('weui_icon_success').addClass('weui_icon_circle');
})
通过使用removeClass()和addClass()方法实现类名的修改从而达到控制单个标签的作用 通过找到当前操作的标签的index值来排除当前元素从而可以操作除当前标签以外的所有数组标签
css部分省略。。。
界面效果