Bagaimana untuk mendapatkan indeks elemen yang sama dalam koleksi berbeza dalam halaman

Question

Cara menambah acara klik pada butang elemen yang sama ini, dan memaparkan serta menyembunyikan tag UL yang sepadan di bawah masing-masing!

Answer 1

Dengan js asli, anda boleh membina fungsi eksplisit dan tersirat, dan kemudian melintasi setiap btn. Fungsi eksplisit dan tersirat boleh mengubah ketinggian ul melalui peralihan CSS3, atau menukar paparan dan kelegapan butiran mesti ditentukan mengikut situasi sebenar. Untuk menjadikannya lebih mudah, anda boleh menggunakan fade dan slaid dalam jQuery.

Answer 2

Ini adalah masalah XY

Tujuannya bukan untuk mendapatkan indeks elemen, tetapi untuk mengikat pemprosesan acara yang serupa dengan elemen yang serupa

Tambah kelas khas untuk semua butang untuk terikat pada acara

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

Hanya pilih elemen ini dan ikatkannya melalui kelas

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

Answer 3

Tambah kelas yang sama="btn bt1" class="btn bt2" class="btn bt3" pada setiap butang

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

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

})