我有一个下拉菜单,在切换时上下滑动以显示它的菜单项。问题是当我在菜单滑下后单击其中一个菜单项时,它会被识别为切换,菜单会在不打开菜单项链接的情况下向上滑动。
HTML
<li class="dropdown">
<a href="#">Carbohydrates, proteins & fats</a>
<ul>
<li><a href="carbohydrates.php">Carbohydrates</a></li>
<li><a href="proteins.php">Proteins</a></li>
<li><a href="fats.php">Fats</a></li>
</ul>
</li>
下拉脚本:
$(document).ready(function () {
$('.dropdown').toggle(
function () {
//show its submenu
$('ul', this).slideDown(300);
},
function () {
//hide its submenu
$('ul', this).slideUp(300);
}
);
});
我很感激任何帮助。
答案 0 :(得分:0)
为什么单独关闭/打开菜单项?当隐藏父<li>
元素时,无论如何都会隐藏所有内容 - 为什么之后会做什么?
我想你想要disable event bubbling。
编辑1:你的事情过于复杂。试试这个:
$(document).ready(function () {
$('.dropdown').toggle();
});
编辑2:你能更具体地了解你想要什么吗?如果您想要一个特定元素,单击时,要控制特定列表的运动,请尝试以下操作:
$(document).ready(function () {
$('a.someLink').click(function() {
$('.dropdown').toggle();
});
});
答案 1 :(得分:0)
尝试在下拉项目之外移动触发链接
<a href="#" class="dropdown">Carbohydrates, proteins & fats</a>
<div class="divdropdown">
<ul>
<li><a href="carbohydrates.php">Carbohydrates</a></li>
<li><a href="proteins.php">Proteins</a></li>
<li><a href="fats.php">Fats</a></li>
</ul>
</div>
然后稍微修改你的jquery
$(document).ready(function () {
$('.dropdown').toggle(
function () {
//show its submenu
$('ul', $(".divdropdown")).slideDown(300);
},
function () {
//hide its submenu
$('ul', $(".divdropdown")).slideUp(300);
}
);
});
答案 2 :(得分:0)
不幸的是,上述答案都没有对我有用。不久之后我找到了一个解决方案。
HTML
<li class="dropdown">
<a class="disablelink" href="#">Carbohydrates, proteins & fats</a>
<ul class="sub_navigation">
<li><a href="carbohydrates.php">Carbohydrates</a></li>
<li><a href="proteins.php">Proteins</a></li>
<li><a href="fats.php">Fats</a></li>
</ul>
</li>
jquery脚本
$(document).ready(function() {
$('.dropdown').click(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideToggle();
});
$(".disablelink").click(function(e) {
e.preventDefault();
});
});
这个解决方案对我来说非常合适。我在e.preventDefault();
中添加了当我点击链接时停止页面上下跳动。