子菜单的Jquery脚本,我该如何修复它
Jquery script for submenu, how can i fix it?
如果我想通过单击菜单来制作切换效果,则此代码效果很好。您可以在此处查看结果。
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
});
var $subs = $links.next();
});
我的问题是 .menu-item a,有了这个脚本为菜单的所有链接执行代码(也适用于没有子菜单链接的链接)。但就我而言,我只想对包含子菜单链接的链接执行。如果我尝试将 .menu-item a 替换为 .menu>则 ul li a 不起作用。
html(由php生成)代码的结构是这样的:
<ul id="menu-menu-1">
<li class="menu">
<a>News</a> //first main menu
<ul class="sub-menu" style="display: none;"> //second grey menu
<li>
<a>Mondo</a>
<a>News Live</a>
<a>Quotidiani Cartacei</a>
</li>
</li>
</ul>
相关的 css:
.menu {
background-color: #F6F6EE;
border-radius: 1px;
height: 30px;
padding: 10px 10px 0 5px;
width: 100%;
}
.menu li a {
color: #716B6B;
display: block;
float: left;
font-size: 14px;
padding: 2px 17px;
text-decoration: none;
width: 100%;
}
#menu-2 {
background-color: #DCDCD5;
border-radius: 1px;
display: none;
height: 33px;
position: relative;
width: 100%;
z-index: -1;
}
我该如何解决它?
您需要在函数顶部检查当前链接是否附加了子菜单。检查click
回调的前两行:
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next(".sub-menu");
var hasSubmenu = submenu.length >= 1;
if(hasSubmenu) {
handleLinkWithSubmenu.call(this, submenu);
} else {
handleLinkWithoutSubmenu.call(this);
}
});
var $subs = $links.next();
function handleLinkWithSubmenu(submenu) {
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
}
function handleLinkWithoutSubmenu() {
$subs.hide();
}
});
如果我正确理解您的问题(仅在选择器有孩子时才执行),然后替换为以下内容:
var $links = $('#menu-menu-1 .menu-item a').click(function (e) {
if($links.children().length > 0){
e.preventDefault();
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
}
});
我认为
这样的东西可以满足您的需求,它更干净,更紧凑:
更新:http://jsfiddle.net/FZHC8/2/
<head>
<script src="jquery-1.10.2.min.js"></script>
<style>
.menu {
background-color: #F6F6EE;
border-radius: 1px;
height: 30px;
padding: 10px 10px 0 5px;
width: 100%;
}
a {
color: #716B6B;
display: block;
float: left;
font-size: 14px;
padding: 2px 17px;
width: 100%;
cursor:pointer;
}
#menu-2 {
background-color: #DCDCD5;
border-radius: 1px;
height: 33px;
position: relative;
width: 100%;
z-index: -1;
}
li{
list-style:none;
}
</style>
</head>
<body>
<ul id="menu-menu-1">
<li class="menu">
<a>News</a>
<ul class="sub-menu">
<li>
<a>Mondo</a>
<a>News Live</a>
<a>Quotidiani Cartacei</a>
</li>
</ul>
<a>News1</a>
<ul class="sub-menu">
<li>
<a>Mondo1</a>
<a>News Live1</a>
<a>Quotidiani Cartacei1</a>
</li>
</ul>
</li>
</ul>
<script>
(function () {
$("li > ul").hide();
$(".menu > a").click(function (e) {
$(this).parent().children(".sub-menu").slideUp(200);
$(this).next(".sub-menu").slideDown(200);
})
})();
</script>
</body>
相关文章:
- 修复选择菜单时的背景图像
- 为什么我的修复菜单在滚动时无法顺利运行
- 如何修复导航菜单
- 如何使用下拉菜单修复jquery日期选择器日期计算功能
- 子菜单的Jquery脚本,我该如何修复它
- 如何修复子菜单的此 jquery 脚本
- 如何修复向下滚动的菜单
- 如何修复网页可见部分右上角的菜单
- 带有可滚动菜单的下拉菜单.无法修复
- 如何使用nextUntil()和not()修复jQuery子菜单手风琴
- 修复导航栏'的下拉菜单
- 如何修复三重下拉菜单
- 修复了滚动时的顶部菜单't允许到达屏幕'底部
- 在Twitter引导程序中,我如何在滚动时修复顶部的菜单栏
- 需要帮助修复3级下拉菜单
- 多个菜单.如果我点击其中一个,我希望另一个关闭.(toogle).它一直是开放的,如何修复
- 修复菜单到响应菜单.css / jquery
- 浮动菜单已修复
- 启动.滚动链接菜单并修复页面顶部的导航栏
- 我如何修复我的CSS,使菜单保持固定在顶部的容器,使用flexx