单击时打开子菜单,下次单击时关闭 - 这就是我想要实现的目标。例如 this page (“关注”链接下的子菜单)。
它打开子菜单(添加“打开”类),但不关闭。卡住了...:(
我的html:
<ul id="toggle"><li>
<a href="#">Menu</a>
<ul id="dropdown" class="dropdown-menu" role="menu">
<li><a href="#">2017</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2003</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
JavaScript:
$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).removeClass('open').addClass('open');
});
});
最佳答案
您可以使用函数toggleClass()
来实现此目的:
$('#toggle li').on('click', function () {
$(this).toggleClass('open')
});
这是一种略有不同的方法:
jQuery
$('#toggle li').on('click', function () {
$(this).find('ul').slideToggle();
});
CSS
#toggle li ul {
list-style-type: none;
left:0;
position:absolute;
display: none;
}
为了防止重定向,您必须使用.preventDefault()
:
$('#toggle li:has(#dropdown)').on('click', function (event) {
if ($(event.target).parents('#dropdown').length > 0) {
event.stopPropagation();
} else {
event.preventDefault();
}
$(this).find('ul').slideToggle();
});
我不确定这是否是最干净或最好的方法,但它确实有效。
如果您想保存网址以供进一步使用(例如通过 window.location
重定向),您可以将 href 属性分配给变量:
var href = $(this).find('a').attr('href');
引用
关于JQuery 添加/删除类 onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29391465/