Tajuk yang ditulis semula ialah: Bagaimana untuk melaksanakan penutupan automatik submenu dalam jQuery
P粉312631645
P粉312631645 2023-09-16 09:10:19
0
2
1078

Saya cuba mencipta menu lungsur jQuery untuk paparan mudah alih. Saya baru menggunakan jQuery dan saya menggunakan Togol untuk menyembunyikan dan menunjukkan submenu. Masalah saya ialah apabila saya mengklik pada item menu, submenu lain tidak ditutup secara automatik. Sebagai contoh, jika saya klik pada menutwo, saya mahu menuone ditutup secara automatik. Bagaimana saya boleh melakukan ini? tolong bantu.

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>

P粉312631645
P粉312631645

membalas semua(2)
P粉207483087

Berjaya akhirnya.

Ini jawapan saya

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
});
});
P粉146080556

Saya akan menggunakan delegasi acara dan mencari UL lain dan menutupnya.

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan