0

クリックアクションを保持する js に var があります。このアクションは、いくつかの異なる div にバインドされています。

<div class="clickable"><div class="hidden">inner content 1</div></div>

<div class="clickable"><div class="hidden">inner content 2</div></div>

<div class="clickable"><div class="hidden">inner content 3</div></div>

js は次のようになります。

$(document).ready(function(){

var clicker = function(){

    $('.hidden').slideUp();

    $(this).children('.hidden').slideDown();

    $(this).unbind('click',clicker);
}


$('.clickable').bind('click',clicker);


});

上記のコードは基本的に機能します。div.clickable をクリックすると、非表示のコンテンツが表示されます。別の div.clickable をクリックすると、今見ていたコンテンツが非表示になり、別のコンテンツが表示されます。ただし、問題は、「クリッカー」内のバインド解除機能により、クリックしたものはすべてクリッカー機能を失うことです。非表示のコンテンツにはクリック可能なものがあり、非表示のコンテンツ内をクリックすると、再び「クリッカー」がトリガーされるため、これを行いました。

アコーディオン プラグインを使用せずに、これに対するよりインテリジェントなアプローチは何ですか?

div が関数にバインドされているかどうかを確認するにはどうすればよいですか? そうでない場合は、再バインドするか、そのようなものを使用できますか? 私が探しているのは、div.clickable が閉じられたら「クリッカー」に再バインドすることです。つまり、別の div.clickable .hidden が見られます。

4

2 に答える 2

1

.slideUp()次のように、 でクリックしているものを除外できます。

$(document).ready(function(){
  $('.clickable').click(function(){
    $('.hidden').not($(this).children()).slideUp();
    $(this).children('.hidden:hidden').slideDown();
  });
});

を使用.not()することで、現在の要素を非表示にする要素から除外しています。.hidden子要素を表示するときに要素のみに制限する:hiddenことは、既に表示されている要素を再スライドさせないことを意味します。

もう少しわかりやすく書き直す別の方法は次のとおりです。

$(function(){
  $('.clickable').click(function(){
    $('.clickable').not(this).children('.hidden').slideUp();
    $(this).children('.hidden:hidden').slideDown();
  });
});

または、すべての.clickable要素が兄弟である場合:

$(function(){
  $('.clickable').click(function(){
    $(this).children('.hidden:hidden').slideDown()
     .end().siblings('.clickable').children('.hidden').slideUp();
  });
});
于 2010-11-14T13:48:36.617 に答える
0 
$(document).ready(function(){

var clicker = function(){

    $('.clickable').bind('click',clicker);

    $('.hidden').slideUp();

    $(this).children('.hidden').slideDown();

    $(this).unbind('click',clicker);
}


$('.clickable').bind('click',clicker);


});
于 2010-11-14T13:53:06.387 に答える