我有这张向上滑动和向下滑动的幻灯片。我可以在单击时向下滑动子项,但在再次单击时无法向上滑动。

JavaScript

jQuery("#all li").on("click", function(e) { 
    e.preventDefault(); 
    var parent  = jQuery(this); 
    var father  = parent.data("clicked", true); 
    var child   = parent.find("ul"); 
    var x       = child.on(":visible"); 
    if (parent.is(":visible")) { 
        child.slideDown("fast"); 
    } else { 
        child.slideUp("fast"); 
    } 
}); 

HTML

<nav> 
  <ul id="all"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a> 
      <ul> 
        <li><a href="#">Sub-Link 1</a></li> 
        <li><a href="#">Sub-Link 2</a></li> 
        <li><a href="#">Sub-Link 3</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Link 3</a> 
      <ul> 
        <li><a href="#">Sub-Link 1</a></li> 
        <li><a href="#">Sub-Link 2</a></li> 
        <li><a href="#">Sub-Link 3</a></li> 
        <li><a href="#">Sub-Link 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Link 4</a></li> 
    <li><a href="#">Link 5</a></li> 
    <li><a href="#">Link 6</a></li> 
  </ul> 
</nav> 

请您参考如下方法:

在我看来,根据您发布的脚本和标记,parent 始终可见。这意味着 if 语句基本上没有任何作用。更改它以检查 child 是否可见可能会有所帮助:

$('#all li').on('click', function() { 
    var parent = $(this); 
  var child = parent.find('ul'); 
 
   if(child.is(':visible')){ 
   $(child).slideUp('fast'); 
   } else { 
   $(child).slideDown('fast'); 
   } 
 
}); 

<强> Fiddle Demo


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!