jquery手风琴下拉菜单

你可以使用jQuery的slideUp()和slideDown()方法来实现手风琴下拉菜单效果。

HTML代码：

<ul class="accordion">
  <li>
    <div class="link">Item 1</div>
    <ul class="submenu">
      <li><a href="#">Subitem 1.1</a></li>
      <li><a href="#">Subitem 1.2</a></li>
      <li><a href="#">Subitem 1.3</a></li>
    </ul>
  </li>
  <li>
    <div class="link">Item 2</div>
    <ul class="submenu">
      <li><a href="#">Subitem 2.1</a></li>
      <li><a href="#">Subitem 2.2</a></li>
      <li><a href="#">Subitem 2.3</a></li>
    </ul>
  </li>
  <li>
    <div class="link">Item 3</div>
    <ul class="submenu">
      <li><a href="#">Subitem 3.1</a></li>
      <li><a href="#">Subitem 3.2</a></li>
      <li><a href="#">Subitem 3.3</a></li>
    </ul>
  </li>
</ul>

CSS样式：

.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordion li {
  background-color: #eee;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.accordion li div {
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}
.accordion li div:hover {
  background-color: #ccc;
}
.accordion ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.accordion li ul li {
  padding: 10px;
  background-color: #f6f6f6;
  border-top: 1px solid #ddd;
}
.accordion li ul li:first-child {
  border-top: none;
}

jQuery代码：

$(document).ready(function() {
  $('.submenu').hide();
  $('.link').click(function() {
    if ($(this).next('.submenu').is(':visible')) {
      $(this).next('.submenu').slideUp();
    } else {
      $('.submenu').slideUp();
      $(this).next('.submenu').slideDown();
    }
  });
});

这段代码会隐藏所有的子菜单，然后当点击菜单项时，判断它的下一个元素是否可见。如果是，则使用slideUp()方法隐藏它。否则，先使用slideUp()方法隐藏所有的子菜单，然后使用slideDown()方法显示当前点击的子菜单。

你可以在jsfiddle上查看完整的示例：https://jsfiddle.net/1y8e6f9j/