How to get the index of the same element in different collections in a page

Question

How to add click events to these same element buttons, and display and hide the corresponding UL tags below respectively!

Answer 1

With native js, you can construct an explicit and implicit function, and then traverse to each btn. The explicit and implicit function can change the height of the ul through the transition of CSS3, or change the display and opacity. The specifics must be determined according to the actual situation. To make it simpler, you can use fade and slide in jQuery.

Answer 2

This is an XY problem

The purpose is not to get the element index, but to bind similar event processing to similar elements

Add a special class for all buttons to which events will be bound

<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>

Just select these elements and bind them through the class

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

Answer 3

Add the same class="btn bt1" class="btn bt2" class="btn bt3" to each button

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

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

})