jQuery - live()与Next()在附加的div中不工作

1 人关注

这个元素的目的是建立一个完全基于简单无序列表的可折叠的导航系统。默认情况下，所有的嵌套列表将被隐藏，而.toggle divs（按钮）将被附加到包含嵌套列表的li项目上。这些.toggle divs应该隐藏/显示嵌套列表，并对切换按钮应用一个类别。

我通过手动插入.toggle div（用[toggle div]注明的位置）来测试这段代码，一切都能完美运行。但是，当它通过append()添加时，似乎没有任何效果。有谁知道是什么导致了这个问题？如果有任何帮助，我们将不胜感激--谢谢!

HTML。

<div id="nav">
<li><a href="#">nav item</a>[toggle div]
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a>[toggle div]
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
jQuery。
$(function(){
$("#nav ul li").has("ul").append("<div class='toggle'></div>");
$(".toggle").live("click", function() {
    if($(this).next().is(":hidden")) {
        $(this).next().show();
        $(this).addClass("toggled");
    } else {
        $(this).next().hide();
        $(this).removeClass("toggled");


           
            
             
              
               The Scrum Meister
              
              ：


            
             
              
               
                很抱歉，我只是包括了包裹无序列表的#nav div。  我也想明白了!  我需要把.next()换成.prev()，因为它没有被附加到我手动放置的地方--一个愚蠢的疏忽。  谢谢你指出这一点。


           
            
             
              
               试试这个。
              
              $("#nav li > ul").before('<div class="toggle"></div>');
如果将选择所有直接嵌套在<li>元素中的<ul>元素，并在每个元素前面添加<div>。
请看一下演示：http://jsfiddle.net/xXRSZ/1/


            
             
              
               
                
                 
                  这就是我想做的事情的一个完美例子。  看起来这个方法可以和原来的代码一起使用，而且绝对是我所做的append/prev修改的一个干净的替代方案。  谢谢你的帮助!


          
           
            
             
              
               
                
                
                 The Scrum Meister
                
               
               
                发布于
                
                2011-05-27