jQuery简单下拉菜单 [英] jQuery simple dropdown menu

问题描述

我想做一个简单的下拉菜单，但我做不到，因此子菜单一次打开一个.例如，当您打开第二个菜单时，第一个菜单将关闭，依此类推.

I want to make a simple dropdown menu but I can't make it so the sub-menus open one at a time. For example, when you open the second menu the first one closes and so on.

$('#menu div').click(function() {
  $(this).next().slideToggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <div>Menu 1</div>
  <p> SOME TEXT </p>
  <div>Menu 2</div>
  <p> SOME TEXT </p>
  <div>Menu 3</div>
  <p> SOME TEXT </p>
  <div>Menu 4</div>
  <p> SOME TEXT </p>
  <div>Menu 5</div>
  <p> SOME TEXT </p>
</div>

推荐答案

要执行所需的操作，只需对所有不相关的 p 元素调用 slideUp()到被点击的 div :

To do what you need simply call slideUp() on all the p elements which are not related to the div which was clicked:

$('#menu div').click(function() { 
  let $target = $(this).next().slideToggle();
  $('#menu p').not($target).slideUp();
})

p { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <div>Menu 1</div>
  <p> SOME TEXT </p>
  <div>Menu 2</div>
  <p> SOME TEXT </p>
  <div>Menu 3</div>
  <p> SOME TEXT </p>
  <div>Menu 4</div>
  <p> SOME TEXT </p>
  <div>Menu 5</div>
  <p> SOME TEXT </p>
</div>

这篇关于jQuery简单下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！