Der umgeschriebene Titel lautet: So implementieren Sie das automatische Schließen von Untermenüs in jQuery

Question

Ich versuche, ein jQuery-Dropdown-Menü für die mobile Ansicht zu erstellen. Ich bin neu bei jQuery und verwende Toggle, um Untermenüs auszublenden und anzuzeigen. Mein Problem ist, dass die anderen Untermenüs nicht automatisch geschlossen werden, wenn ich auf einen Menüpunkt klicke. Wenn ich beispielsweise auf „menutwo“ klicke, möchte ich, dass „menuone“ automatisch geschlossen wird. Wie kann ich das machen? Bitte helfen Sie.

jQuery(document).ready(function($) {
  $(".menuone").click(function() {
    $(".submenuone").toggle(200);
  });
  $(".menutwo").click(function() {
    $(".submenutwo").toggle(200);
  });
  $(".menuthree").click(function() {
    $(".submenuthree").toggle(200);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-menu" class="menu dropdown-menu">
  <li class="menuone"><a href="#">关于我们</a>
    <ul class="submenuone">
      <li>公司概况</a>
      </li>
    </ul>
  </li>
  <li class="menutwo"><a href="#">解决方案</a>
    <ul class="submenutwo">
      <li>应收账款融资和催收</li>
      <li>工人补偿融资></li>
    </ul>
  </li>
  <li class="menuthree"><a href="#">提供者类型</a>
    <ul class="submenuthree">
      <li>医生</a>
      </li>
      <li>药房</a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

Made it finally.

Here is my answer

jQuery(document).ready(function($) {
  $(".menuone").click(function() {
  $(".submenuone").toggle(200);
  $(".submenutwo, .submenuthree").hide(200); // Hide other submenus
  });

$(".menutwo").click(function() {
$(".submenutwo").toggle(200);
$(".submenuone, .submenuthree").hide(200); // Hide other submenus
});

$(".menuthree").click(function() {
$(".submenuthree").toggle(200);
$(".submenuone, .submenutwo").hide(200); // Hide other submenus
});
});

Answer 2

我会使用事件委托，并找到其他的UL并关闭它们。

jQuery(document).ready(function($) {
  $("#menu-menu").on("click", "> li", function () {
     $("#menu-menu > li").not(this).find("ul").hide(200);
     $(this).find("ul").toggle(200);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-menu" class="menu dropdown-menu">
  <li class="menuone"><a href="#">关于我们</a>
    <ul class="submenuone">
      <li>公司概况</a>
      </li>
    </ul>
  </li>
  <li class="menutwo"><a href="#">解决方案</a>
    <ul class="submenutwo">
      <li>应收账款融资和催收</li>
      <li>工人赔偿融资></li>
    </ul>
  </li>
  <li class="menuthree"><a href="#">供应商类型</a>
    <ul class="submenuthree">
      <li>医生</a>
      </li>
      <li>药房</a>
      </li>
    </ul>
  </li>
</ul>