我自己的手风琴javascript不起作用。

Question

<div id="wrapDesktopNavBar">
        <ul class="desktopNavBar" id="accordion">

            <li>
                <form class="search">
                    <input type="text" placeholder="Search here" required>
                </form>
            </li>
            <li><a class="firstLevel" href="#home"  onclick="callthis()">Main Category 1</a></li>
            <li><a class="firstLevel" href="#">Main category 2</a>
                <ul>
                    <li><a class="secondLevel" href="#">Sub Category 1</a>
                    <li><a class="secondLevel" href="#">Sub Category 2</a>
                    <li><a class="secondLevel" href="#">Sub Category 3</a>
                    <li><a class="secondLevel" href="#">Sub Category 4</a>
                    <li><a class="secondLevel" href="#">Sub Category 5</a>
                    <li><a class="secondLevel" href="#">Sub Category 6</a>
                </ul></li>
            <li><a class="firstLevel" href="#">Main Category 3</a></li>
            <li><a class="firstLevel" href="#">Main category 4</a>
                <ul>...

这是我的html和我的javascript以使子类别向上滑动：

  $("#accordion > li").on('click', function () {
      if (false == $(this).next('ul').is(':visible')) {
          $('#accordion > ul').slideUp(300);
      }
      $(this).next('ul').slideToggle(300);
  });

但是当我点击主要类别时，子类别将不会出现。它应该像jquery ui手风琴一样滑出。请帮忙。我不太清楚为什么子类别没有显示。

Answer 1

<强> FIDDLE

$('.firstLevel').click(function () {
    $(this).next().toggle(300);
});