javascript - 如何取得頁面中不同集合中相同元素的索引

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(){
    $(this).next().show() // 显示按钮后面紧跟的元素
})

Answer 3

給每個button 加上相同的class=“btn bt1” class=“btn bt2” class=“btn bt3”

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

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

})