I'm trying to create a jQuery dropdown menu for a mobile view. I'm new to jQuery and I'm using Toggle to hide and show submenus. My problem is that when I click on a menu item, the other submenus don't close automatically. For example, if I click menutwo, I want menuone to close automatically. How can I do this? please help.
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="#">關(guān)于我們</a>
<ul class="submenuone">
<li>公司概況</a>
</li>
</ul>
</li>
<li class="menutwo"><a href="#">解決方案</a>
<ul class="submenutwo">
<li>應(yīng)收賬款融資和催收</li>
<li>工人補(bǔ)償融資></li>
</ul>
</li>
<li class="menuthree"><a href="#">提供者類型</a>
<ul class="submenuthree">
<li>醫(yī)生</a>
</li>
<li>藥房</a>
</li>
</ul>
</li>
</ul>
2
0
0
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
});
});
I would use event delegation and find other ULs and close them.
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="#">關(guān)于我們</a>
<ul class="submenuone">
<li>公司概況</a>
</li>
</ul>
</li>
<li class="menutwo"><a href="#">解決方案</a>
<ul class="submenutwo">
<li>應(yīng)收賬款融資和催收</li>
<li>工人賠償融資></li>
</ul>
</li>
<li class="menuthree"><a href="#">供應(yīng)商類型</a>
<ul class="submenuthree">
<li>醫(yī)生</a>
</li>
<li>藥房</a>
</li>
</ul>
</li>
</ul>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
