使用 jquery 制作我自己的手风琴风格切换

Question

我在 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 。

Answer 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();
  });
});

Answer 2

$(document).ready(function(){

var clicker = function(){

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

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

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

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


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


});