Question

我向上滑动并向下滑动。我可以在点击时滑下孩子，但再次点击时无法向上滑动。

的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>

Answer 1

在我看来，基于您发布的脚本和标记，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

Answer 2

要获得预期结果，请使用slideToggle（）

JS：

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.slideToggle("fast");
  }
});

http://codepen.io/nagasai/pen/jAkjBd

没有错误显示但是没有slideUp（）;

2 个答案: