如何制作活跃的jQuery手风琴菜单？

Question

我有jQuery简单的垂直手风琴菜单。

使用Javascript：

＆＃13;

＆＃13;

$(document).ready(function () { 
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    } else {
      $('#nav li ul').slideUp();
      $('#nav li a').removeClass('active');
    }
  });
});

＆＃13;

#nav li ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我想要课程showmenu，如果我为＆＃34;项目3＆＃34;添加这个课程页面加载时，此菜单将自动打开。怎么做呢

Answer 1

只需将slideDown()添加到ul内的li showmenu 类

 $('.showmenu ul').slideDown();

＆＃13;

＆＃13;

$(document).ready(function () { 
  $('.showmenu ul').slideDown();
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    } else {
      $('#nav li ul').slideUp();
      $('#nav li a').removeClass('active');
    }
  });
});

＆＃13;

#nav li ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
      <li><a href="#">Item 1</a>
        <ul>
          <li><a href="#">Sub-Item 1 a</a></li>
          <li><a href="#">Sub-Item 1 b</a></li>
          <li><a href="#">Sub-Item 1 c</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a>
        <ul>
          <li><a href="#">Sub-Item 2 a</a></li>
          <li><a href="#">Sub-Item 2 b</a></li>
        </ul>
      </li>
      <li class="showmenu"><a href="#">Item 3</a>
        <ul>
          <li><a href="#">Sub-Item 2 a</a></li>
          <li><a href="#">Sub-Item 2 b</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a>
        <ul>
          <li><a href="#">Sub-Item 2 a</a></li>
          <li><a href="#">Sub-Item 2 b</a></li>
        </ul>
      </li>
    </ul>

＆＃13;

＆＃13;

＆＃13;