jQuery的手風琴

我試圖做一個簡單的手風琴在用戶點擊第1層看到2級，點擊二級看三級等。級別1將被複制多次，所以我使用.children方法來避免單擊級別1時所有級別2的打開。jQuery的手風琴

問題是，當2級被點擊它打開3級也將關閉1級我可以直接針對每一個來解決這個問題，但我想用代碼的最低金額做。任何建議將不勝感激。

<div class="level1"> 
Level 1 
    <div class="level2"> 
    Level 2 
     <div class="level3"> 
     Level 3 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('.level1').click(function(){ 
     $(this).children('.level2').slideToggle('300'); 
     }); 
}); 
</script>

來源

2012-03-30 jimbouton

你可以讓更多的通用（這樣你就可以很容易地添加更多的級別後等）：

<div class="level1 acc"> 
Level 1 
    <div class="level2 acc"> 
    Level 2 
     <div class="level3 acc"> 
     Level 3 
     </div> 
    </div> 
</div> 

(function($) { 
    $('.acc').click(function(){ 
     $(this).children('div').slideToggle('300'); 

     return false; // this prevents event bubbling (thus preventing the behavior you have now) 
    }); 
})(jQuery);

演示：http://jsfiddle.net/PeeHaa/7gAzx/

來源

2012-03-30 09:10:52 PeeHaa

這很好，謝謝。 – jimbouton 2012-03-30 16:09:06

試試這個：

$(document).ready(function(){ 
    $('div').click(function(event){ 
     $(this).find(">:first-child").slideToggle('300'); 
     event.stopPropagation(); 
    }); 
});

這隻打開第一個孩子 - example here。您需要event.stopPropagation來停止冒泡DOM樹並導致意外切換的事件！

來源

2012-03-30 09:12:12 ManseUK

可以給每個部門的共同PROPERT過剩像類

<div class="level" id="level1"> 
    Level 1 
    <div class="level" id="level2" > 
    Level 2 
     <div class="level" id="level3" > 
     Level 3 
    </div> 
</div>

那麼你可以切換它們作爲

$('.level').click(function() { 
    $(this).children('div').slideToggle('300'); 
    event.stopPropagation(); 
});

後各

單擊停止執行事件再次
我想這將幫助你
這裏是例子http://jsfiddle.net/Simplybj/aZ5wv/

來源

2012-03-30 09:30:40 mesimplybj

如果在同一級別上有多個元素，該怎麼辦？你如何處理你的ID？ – PeeHaa 2012-03-30 09:54:51

@RepWhoringPeeHaa我只是提到了ID。以及我正在使用類來操縱toogle。這適用於在同一水平上太http://jsfiddle.net/Simplybj/aZ5wv/2/ – mesimplybj 2012-03-30 10:19:17

錯了多個元素！ DOM中不能有多個元素具有相同的ID。這就是爲什麼我問:) – PeeHaa 2012-03-30 10:20:22

jQuery的手風琴

回答

相關問題