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

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

上面的代码基本上是有效的。如果单击div.clickable，它将显示隐藏的内容。如果我单击另一个div.clickable，它会隐藏我刚才查看的内容并显示另一个内容。但问题是，由于“clicker”中的解除绑定功能，我单击的任何东西都会失去其clicker功能。我这样做是因为隐藏内容有可点击的内容，我现在在隐藏内容中点击的任何内容都会再次触发“点击器”

在不使用手风琴插件的情况下，哪种方法更智能

---

如何检查div是否已绑定到函数，如果未绑定，如何重新绑定它或类似的东西？我想要的是在关闭div.clickable后将其重新绑定到“clicker”，即查看另一个div.clickable.hidden。

您只需排除在中单击的div.clickable.hidden，如下所示：

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

通过使用，我们排除了要隐藏的

.hidden

元素中的当前元素，当显示子元素时，将其限制为仅包含元素意味着我们不会重新滑动任何已可见的元素

另一种更简单地重新编写的方法是：

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

或者，如果它们都

。可单击的
元素是兄弟元素：

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

@KeenLearner-和更少的绑定：）我添加了一些替代方案，以便更清楚地了解发生了什么，选择您的风格：）更正无绑定！令人惊叹的。从你的帮助和鼓励中学到了很多。这并不能真正解决任何问题，孩子们仍然会崩溃他们的父母（如果这样做有效的话），但你是双重绑定，然后重新解除绑定，所以这实际上不会产生任何净效果。
$(function(){
  $('.clickable').click(function(){
    $(this).children('.hidden:hidden').slideDown()
     .end().siblings('.clickable').children('.hidden').slideUp();
  });
});

$(document).ready(function(){

var clicker = function(){

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

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

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

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


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


});