Le titre réécrit est : Comment implémenter la fermeture automatique du sous-menu dans jQuery

Question

J'essaie de créer un menu déroulant jQuery pour la vue mobile. Je suis nouveau sur jQuery et j'utilise Toggle pour masquer et afficher les sous-menus. Mon problème est que lorsque je clique sur un élément de menu, les autres sous-menus ne se ferment pas automatiquement. Par exemple, si je clique sur menutwo, je souhaite que menuone se ferme automatiquement. Comment puis-je faire ceci? s'il vous plaît, aidez-moi.

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

J'ai enfin réussi.

Voici ma réponse

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

J'utiliserais la délégation d'événements, trouverais d'autres UL et les fermerais.

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>