定义

Question

我不会为点击李执行操作锂项目的行动，为expample切换嵌套UL

这是HTML

<script type="text/javascript"> 
$(function() { 
    $('#verticalfade').verticalfade(); 
}); 
</script> 
<div id="verticalfade_container"> 
    <ul id="verticalfade"> 
     <li>Le Collezioni 
      <ul> 
       <li>Link 1</li> 
       <li>Link 2</li> 
      </ul> 
     </li> 
     <li>Extra Plus 
      <ul> 
       <li>Link 1</li> 
       <li>Link 2</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

这是JavaScript：

(function($){ 
    $.fn.extend({ 
     verticalfade: function(options){ 

      var defaults = { 
       speed: 'normal' 
      }; 
      var options = $.extend(defaults, options); 


      $('ul#verticalfade li ul').each(function(){ 
       $('ul#verticalfade li ul').hide(); 
      });  

      $('ul#verticalfade li').each(function(){ 
       $(this).click(function(){ 
        $(this).next('ul').toggle(500); 
       }); 
     }); 
     }  
    }); 
})(jQuery); 

我隐藏了列表中的所有子ul，但我无法为每个li定义一个函数来仅显示下一个ul。我尝试了下一个（'ul'）功能，但我只能一次切换所有ul。

Answer 1

变化 $(this).next('ul').toggle(500);到

//first line hides the previously clicked li's children $(this).siblings('li').children('ul').slideUp(); $(this).children('ul').toggle(500);

Answer 2

这里有一个简单的变体（在http://gist.github.com/575089完整的源）：

本质：

$('ul#verticalfade > li > ul').each(function(){ 
     $(this).hide(); 
    });  

$("ul#verticalfade > li").click(function(){ 
    $("ul", this).toggle(500); 
});