jQuery 简单的下拉菜单

Question

我想制作一个简单的下拉菜单，但我做不到，所以子菜单一次打开一个。例如，当您打开第二个菜单时，第一个菜单会关闭，依此类推。

$('#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>

Answer 1

要执行您需要的操作，只需对所有 p 元素调用 slideUp()，这些元素与被单击的 div 无关：

$('#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 简单的下拉菜单

jQuery simple dropdown menu

jquery

drop-down-menu