如何获取页面中不同集合中相同元素的索引

Question

怎么给这些相同元素ｂｕｔｔｏｎ加点击事件，分别显示跟隐藏相应的下面ＵＬ标签！

Answer 1

原生js的话可以构造一个显隐函数，然后遍历给每个btn。显隐函数可以通过css3的transition改变ul的高度，或者改变display、opacity，具体得根据实际情况来定。简单一点可以用jQuery中的fade，slide。

Answer 2

这是个XY问题

目的不是为了得到元素索引，而是给同类元素绑定类似的事件处理

为所有要绑定事件的按钮添加一个特殊的类

<button id="btn1" class="btn-toggle-menu">1</button>
<ul>...</ul>
<button id="btn2" class="btn-toggle-menu">2</button>
<ul>...</ul>
<button id="btn3" class="btn-toggle-menu">3</button>
<ul>...</ul>
<button id="btn4" class="btn-toggle-menu">4</button>
<ul>...</ul>

通过类选中这些元素绑定处理就好了

$('button.btn-tobble-menu').each(function(){
    $(this).next().hide() // 隐藏按钮后面紧跟的元素
})
$('button.btn-toggle-menu').click(function(){
    // 把其他菜单隐藏掉
    $('button.btn-tobble-menu').each(function(){
        $(this).next().hide() // 隐藏按钮后面紧跟的元素
    })
    $(this).next().show() // 显示按钮后面紧跟的元素
})

更新了代码，实现了点开新菜单，隐藏旧菜单。
不过这样做不是最好的办法，但是够用了，优化什么的是之后的事情。

Answer 3

给每个button 加上一样的class=“btn bt1” class=“btn bt2” class=“btn bt3”

$('.btn').click(function(){
$(".btunder").hide（）;

$(this).next(".btunder").show() ;

})

Answer 4

事件委托，遍历父级下所有子节点