jQuery切换子菜单
jQuery切换子菜单
提问于 2014-10-07 12:24:10
我需要些帮助。我尝试使用jQuery创建一个切换子菜单。但是，子菜单只显示几秒钟，然后在单击父li时消失。
以下是代码：
<div class="menu">
<ul>
<li class="parent">
<a href="">Hello</a>
<ul class="submenu">
<li>
<a href="">Hello</a>
</li>
<li>
<a href="">Hello</a>
</li>
</ul>
</li>
<li class="parent">
<a href="">Hello</a>
<ul class="submenu">
<li>
<a href="">Hello</a>
</li>
<li>
<a href="">Hello</a>
</li>
</ul>
</li>
</ul>
</div>这是jQuery代码
$(function() {
$(".submenu").hide();
$(".parent").click(function(){
$(".submenu").toggle()
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-10-07 12:25:36
对当前选定的元素使用this，并对dom中的特定类使用find
$(function () {
$(".submenu").hide();
$(".parent").click(function (e) {
e.preventDefault(); // If you need to stop default action
$(".submenu", this).toggle(); // OR $(this).find(".submenu").toggle();
});
});试着按你的要求发表评论
$(function () {
$(".submenu").hide();
$(".parent").click(function (e) {
e.preventDefault();
if (!$(e.target).closest("ul").is(".submenu")) {
$(".submenu", this).toggle();
}
});
});$(function () {
$(".submenu").hide();
$(".parent").click(function (e) {
e.preventDefault();
if (!$(e.target).closest("ul").is(".submenu")) {
$(".submenu", this).toggle();
$(this).siblings(".parent").find(".submenu").hide();
}
});
});Stack Overflow用户
发布于 2014-10-07 12:25:15
尝试将其作为上下文传递给选择器，
$(function () {
$(".submenu").hide();
$(".parent").click(function (e) {
$(".submenu:first", this).toggle();
return false;
});
});在这种情况下，我们需要同时调用.preventDefault()和.stopPropagation()。因此，我建议您使用return false来执行这两个操作。
$(function () {
$(".parent a").click(function (e) {
var elems = $(this).closest('li');
if (elems.find('.submenu').length) {
$(".submenu:first", elems).toggle();
}
return false;
});
});对于新的需求，请使用下面的代码，
$(function () {
$(".submenu").hide();
$(".parent a").click(function (e) {
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.submenu').length) {
$(".submenu:first", elems).toggle();
}
return false;
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26235928
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号