1

ドロップオウンリストを作成したい。

<dl>
<dt>Option 1</dt>
<dd><a href="#" /></dd>//a
<dd><a href="#" /></dd>//b
<dd><a href="#" /></dd>//c
<dt>Option 2</dt>
<dd><a href="#" /></dd>//1
<dd><a href="#" /></dd>//2
<dd><a href="#" /></dd>//3
</dl>

私のjquery：

<script>
$('dd').hide();
$(document).ready(function(){
$('dt').bind('click', function(){
$(this).toggleClass('open').nextAll('dd').slideToggle(2000);
});
});
</script>

私が望むのは、ユーザーがオプション 1 (dt) をクリックすると、a、b、および c のみが表示されることです。オプション 2 (dt) をクリックすると、1、2、および 3 のみが表示されます。現在起こっていることは、すべての dd が明らかにされていることです (a、b、c および 1、2、3)。nextAll() からすべてを削除したところ、a と 1 だけが明らかになりました。すべての dd を明らかにせずに、dt に続く情報のみを明らかにする方法はありますか?

4

1 に答える 1

1

nextUntil()を使用して、次のすべての兄弟要素を次まで一致させることができます<dt>。

$("dt").on("click", function() {
    $(this).toggleClass("open").nextUntil("dt").slideToggle(2000);
});
于 2013-01-12T17:08:43.957 に答える