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 重新绑定到“clicker”,一旦它被关闭,即正在查看另一个 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 回答