我正在制作一个包含子菜单的菜单。当我点击一个菜单项时,我正在使用阻止默认,因为它是一个标签,但在子菜单级别我不想阻止默认。我一直无法弄清楚如何让它工作,所以它不会影响顶层。
<div id="block-menu-block-2">
<ul class="menu">
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
<ul class="menu">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
<li><a href="#">2.4</a></li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul class="menu">
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li>
<li><a href="#">3.4</a></li>
</ul>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">6</a>
<ul class="menu">
<li><a href="#">6.1</a></li>
</ul>
</li>
</ul>
</div>
这是jQuery
$('#block-menu-block-2 ul li').on("click", function() {
if ($(this).children().is('ul')) {
if ($(this).find('ul').is(':visible')) {
$(this).find('ul').hide("blind");
$(this).removeClass('menuItemSelected');
$(this).find('ul').removeClass('menuItemSelected');
} else {
$(this).parent().find('li ul').hide("blind");
$(this).parent().find('.menuItemSelected').removeClass('menuItemSelected');
$(this).find('ul').show("blind");
$(this).addClass('menuItemSelected');
$(this).find('ul').addClass('menuItemSelected');
};
event.preventDefault()
}
});
这是一个代码笔供引用:http://codepen.io/mathiasha/pen/bVpMyo
最佳答案
添加了一些内容。改变了一些东西。无法从我的手机粘贴到 codepen,所以这可能行不通。先写代码,再写字墙。
$('#block-menu-block-2 ul li').each (function () {
var $this = $(this);
if ($this.find ('ul:first').length > 0) {
$this.click (function () {
if ($this.find ('ul:visible').length > 0) {
$this.removeClass ('menuItemSelected').find ('ul').removeClass('menuItemSelected').hide ('blind');
} else {
$this.parent ().find ('ul li').hide ('blind');
$this.parent ().find('.menuItemSelected').removeClass ('menuItemSelected');
$this.addClass ('menuItemSelected').find ('ul').show ('blind').addClass ('menuItemSelected');
}
});
}
});
$('#block-menu-block-2 > ul > li > a').click (function (e) {
if ($(this).find ('ul:first').length > 0)
e.preventDefault ();
});
真正的答案在于仅将 preventDefault 仅放在 a 标签上,并且仅当它是 li 标签的直接子标签时 tjat 是 ul 标签的直接子标签,而 ul 标签是 block 菜单的直接子标签。请参阅最后 3 行。
下面的其余代码应该只将点击监听器添加到带有 ul 标签的 li 标签。尝试使用链接来限制创建的 jQuery 对象的数量。可能搞砸了它在做什么。您真的只需要从它所在的位置删除 preventDefault,而不是使用最后 3 行。
关于javascript - 仅在某些级别上防止违约,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32654984/