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>醫(yī)生</a> </li> <li>藥房</a> </li> </ul> </li> </ul>
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 }); });
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>醫(yī)生</a> </li> <li>藥房</a> </li> </ul> </li> </ul>