li在ul內部未顯示

Question

http://jsfiddle.net/eRtP3/

我有菜單，在li里面，單擊ul顯示的li時還有另一個ul。 但是這個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();
    })
})

演示： 小提琴

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");

這是演示

Answer 4

在您的jQuery代碼中嘗試這個-

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