Question

我有菜单，在li里面，还有另一个ul，当点击ul显示的li时。但是这个jquery没有用。

$(document).ready(function () {
  $("#side-nav .sub-menu").click(function () {
    //slide up all the link lists
    $("#side-nav ul ul").slideUp();
    //slide down the link list below the h3 clicked - only if its closed
    if (!$(this).next().is(":visible")) {
      $(this).next().slideDown();
    }
  })
})

HTML

<div id="side-nav">
  <ul>
    <li style="border-top: thin #eee solid;" class="sub-menu">
      <i class="fa fa-upload fa-lg"></i>Upload
      <ul>
        <li><a href="#">Link1</a>
        </li>
        <li><a href="#">Link2</a>
        </li>
        <li><a href="#">Link3</a>
        </li>
      </ul>
    </li>
    <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a>
    </li>

  </ul>
</div>

CSS

  #side-nav ul ul {
display: none;
    }
  #side-nav li.active ul {
display: block;
   }

Answer 1

尝试

<div id="side-nav">
    <ul>
        <li style="border-top: thin #eee solid;" class="sub-menu">
            <!--Use a another wrapper element for the tirgger part-->
            <span><i class="fa fa-upload fa-lg"></i>Upload</span>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </li>
        <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a></li>
    </ul>
</div>

然后

$(document).ready(function () {
    $("#side-nav .sub-menu > span").click(function () {
        //slide down the target
        var $nxt = $(this).next().stop(true).slideDown();
        //slide up all other elements
        $("#side-nav ul ul").not($nxt).stop(true).slideUp();
    })
})

演示：Fiddle

Answer 2

我对你的代码做了一些调整，但是在使用jsfiddle和你使用jquery时要记住的另一件事就是包含jquery框架库。

$(document).ready(function () {
$("#side-nav .sub-menu").click(function () {
    // if secondary nav is not visible, slide down
    if (!$('> ul', this).is(":visible")) {
        $('> ul', this).slideDown();
    } else { // else, it is visible so slide up
        $('> ul', this).slideUp();
    }
})
})

Answer 3

简单地替换

$("#side-nav ul ul").slideUp();

通过

$("#side-nav ul ul").slideToggle("slow");

这是demo

Answer 4

在你的jquery代码中试试这个 -

   $(document).ready(function () {
     $("#side-nav .sub-menu").click(function () {
       $("#side-nav ul ul").toggle('slow');
      })
    })

li没有显示在ul里面

4 个答案: