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的手风琴

回答

相关问题