-2

div 内にある div を表示するために、slideToggle 関数を使用しています。切り替えられている div には、チェックボックスのあるフォームも含まれています。チェックボックスがチェックされるたびに、div スライドが閉じられます。

これを回避するためにセレクターをより適切に使用するにはどうすればよいですか?

JS

$('.head').click(function(){       
        $(this).find('div.body').slideToggle();
        return false;
    });

HTML

<div class="head">
Show Content 1
<div class="body" style="display:none;">Content</div>​
</div>
4

1 に答える 1

0

ここでの問題は、head クラスを使用して div にクリック イベント リスナーをアタッチしたことです。すべてのイベントはドキュメント オブジェクト モデルをバブルアップするため、「head div」内の任意の場所をクリックすると、イベントが発生します。この問題を解決するにはいくつかの方法があります。入力要素のイベント伝播を停止するか、ドキュメントを再構築できます。div 内に含まれるすべてのものの伝播を停止する必要がないように、再構築することをお勧めします。

<div class="head">Show Content 1</div>
<div class="body" style="display:none;">Content</div>

$('.head').click(function(){       
    $(this).next('div.body').slideToggle();
    return false;
});​

より洗練された jQuery および DOM ソリューションがありますが、これでアイデアが得られることを願っています。

于 2012-06-13T22:33:17.107 に答える