用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); 


});