Comment obtenir l'index du même élément dans différentes collections d'une page

Question

Comment ajouter des événements de clic à ces mêmes boutons d'éléments, et afficher et masquer les balises UL correspondantes ci-dessous respectivement !

Answer 1

Avec js natif, vous pouvez construire une fonction explicite et implicite, puis parcourir chaque btn. Les fonctions explicites et implicites peuvent modifier la hauteur de l'ul via la transition de CSS3, ou modifier l'affichage et l'opacité. Les spécificités doivent être déterminées en fonction de la situation réelle. Pour simplifier les choses, vous pouvez utiliser le fondu et le glissement dans jQuery.

Answer 2

Il s'agit d'un problème XY

Le but n'est pas d'obtenir l'index de l'élément, mais de lier un traitement d'événement similaire à des éléments similaires

Ajoutez une classe spéciale pour tous les boutons permettant de lier des événements

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

Sélectionnez simplement ces éléments et liez-les via la classe

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

Answer 3

Ajoutez le même class="btn bt1" class="btn bt2" class="btn bt3" à chaque bouton

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

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

})