用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，它会隐藏我刚看到的内容并显示另一个内容。但问题是，由于'clicker'内部的解除绑定功能，我点击的任何东西都会失去它的喀哒声功能。我这样做是因为隐藏的内容具有可点击的内容，而我现在在隐藏的内容中单击的任何内容都会再次触发'clicker'。

如果不使用手风琴插件，更智能的方法是什么？

如何检查一个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); 


});