我尝试了一些jQuery,我想弄清楚如何使滑动菜单工作。我在<ul>
上有一个“下拉列表”。我点击所有<a>
的子菜单显示。子菜单<ul>
有为他们指定的类“子菜单”。
我已经做了很多工作。现在我想要确保的是,当点击子菜单项时,它们的行为与通常一样。现在,preventDefault阻止了这一点。整洁的功能,但我想为子菜单<a>
禁用它。
我有以下代码:
$(document).ready(function () {
$('.dropdown > li').click(function () {
var $el = $('ul', this); // element to toggle
$('.dropdown > li > ul').not($el).slideUp();
$(this).find('.sub-menu ').slideToggle();
});
$('.dropdown > li').children().children().click(function (e) {
return false;
});
$(".dropdown > li > a").click(function (e) {
e.preventDefault();
});
});
我添加了preventDefault以避免主菜单上的正常例程,并且我禁用了子菜单的slideToggle操作。
现在我想添加子菜单<a>
的默认行为。他们此刻什么都不做。
编辑:我找到了JQuery的“不”位,我试图让它工作(因为我还没有得到令人满意的答案)。我想要的是从滑动子菜单的功能中排除属于类“子菜单”的所有内容。我想出的语法是:
$('.dropdown > li').not('ul.sub-menu > li > a').click(function() {
}
但它不起作用。当我单击其中的内容时仍然执行该功能。那么我怎样才能将上面的代码改写为上面的函数总是执行,除非它在?
正如我评论的那样,
$('.dropdown > li').children().children().click(function (e) {
return false;
});
选择子菜单链接和return false
具有相同的e.preventDefault()
效果。
拿出那一点
您可以为第一个或任何指定的元素执行此操作:
$(document).ready(function () {
$('.menu-item').bind('click', function () {
if($(this).children('ul').length =0){
return false;
}
else{
$(this).children('.sub-menu ').slideToggle();
return false;
}
});
});
如果HTML代码是这样的:
<ul class="dropdown">
<li class="menu-item">
<a href="#">
ITEM1
</a>
</li>
<li class="menu-item">
<a href="#">
ITEM2
</a>
<ul class="sub-menu" >
<li class="menu-item">
<a href="#">
SUBITEM1
</a>
</li>
<li class="menu-item">
<a href="#">
SUBITEM2
</a>
</li>
</ul>
</li>
</ul>
我终于发现了一些看起来像我想要的东西。在下面的代码中(在所有“其他”子项已经滑动之后),检查当前菜单项是否包含可见的子项。如果不是它滑了,否则下来。
$(function() {
$('ul.dropdown > li > a').click(function () {
var $el = $('ul', this);
$('.dropdown > li > ul').not($el).slideUp();
if( $(this).parent().find('.sub-menu ').is(":visible"))
{$(this).parent().find('.sub-menu ').slideUp();}
else
{$(this).parent().find('.sub-menu ').slideDown();}
});
$(".dropdown > li > a").click(function (e) {
e.preventDefault();
});
});
因为它明确地定位了类“dropdown”的元素(即主菜单项),所以子项的默认行为是不受影响的。 (因此,需要this.parent()来查找子菜单项。)