英文:
auto close submenus in jQuery
问题
我正在尝试创建一个适用于移动视图的jQuery下拉菜单。我对jQuery还很陌生，我使用了Toggle来隐藏和显示子菜单。我的问题是，当我点击一个菜单项时，其他子菜单不会自动关闭。例如，如果我点击menutwo，我希望menuone会自动关闭。我该怎么做？请帮忙。
jQuery(document).ready(function($) {
$(".menuone").click(function() {
$(".submenuone").toggle(200);
$(".submenutwo, .submenuthree").hide(200); // Add this line to hide other submenus
});
$(".menutwo").click(function() {
$(".submenutwo").toggle(200);
$(".submenuone, .submenuthree").hide(200); // Add this line to hide other submenus
});
$(".menuthree").click(function() {
$(".submenuthree").toggle(200);
$(".submenuone, .submenutwo").hide(200); // Add this line to hide other submenus
});
});
在每个点击事件中，我添加了一个额外的行来隐藏其他子菜单，以确保只有一个子菜单处于打开状态。
英文:
I am trying to make a jQuery dropdown menu for mobile view. I am new to jQuery and I used Toggle to hide and show submenus. My problem is when I click one menuitem other submenu doesn't close automatically. For example, If I click on menutwo I want menuone to close automatically. How can I do that ? Please help.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
jQuery(document).ready(function($) {
$(".menuone").click(function() {
$(".submenuone").toggle(200);
});
$(".menutwo").click(function() {
$(".submenutwo").toggle(200);
});
$(".menuthree").click(function() {
$(".submenuthree").toggle(200);
});
});
<!-- language: lang-html -->
<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="#"> About Us</a>
<ul class="submenuone">
<li>Company Overview</a>
</li>
</ul>
</li>
<li class="menutwo"><a href="#">Solutions</a>
<ul class="submenutwo">
<li> Receivable Finance and Collections</li>
<li> Workers Comp Financing></li>
</ul>
</li>
<li class="menuthree"><a href="#">Provider Type</a>
<ul class="submenuthree">
<li> Doctors</a>
</li>
<li> Pharmacy</a>
</li>
</ul>
</li>
</ul>
<!-- end snippet -->
答案1
得分: 0
我只会翻译代码部分，以下是翻译后的内容：
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>公司概况</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>医生</li>
<li>药店</li>
</ul>
</li>
</ul>
请注意，我已将代码部分翻译成中文，但标签名称和属性仍然保持原样。
英文:
I would just use event delegation and find the other UL and close them.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
jQuery(document).ready(function($) {
$("#menu-menu").on("click", "> li", function () {
$("#menu-menu > li").not(this).find("ul").hide(200);
$(this).find("ul").toggle(200);
});
});
<!-- language: lang-html -->
<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="#"> About Us</a>
<ul class="submenuone">
<li>Company Overview</a>
</li>
</ul>
</li>
<li class="menutwo"><a href="#">Solutions</a>
<ul class="submenutwo">
<li> Receivable Finance and Collections</li>
<li> Workers Comp Financing></li>
</ul>
</li>
<li class="menuthree"><a href="#">Provider Type</a>
<ul class="submenuthree">
<li> Doctors</a>
</li>
<li> Pharmacy</a>
</li>
</ul>
</li>
</ul>
<!-- end snippet -->
答案2
得分: -1
这是我的回答：
终于成功了。
以下是我的答案：
jQuery(document).ready(function($) {
$(".menuone").click(function() {
$(".submenuone").toggle(200);
$(".submenutwo, .submenuthree").hide(200); // 隐藏其他子菜单
});
$(".menutwo").click(function() {
$(".submenutwo").toggle(200);
$(".submenuone, .submenuthree").hide(200); // 隐藏其他子菜单
});
$(".menuthree").click(function() {
$(".submenuthree").toggle(200);
$(".submenuone, .submenutwo").hide(200); // 隐藏其他子菜单
});
});
请注意，我已经将HTML代码中的实体字符（如"）还原为原始字符。
英文:
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
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论