Jquery script for submenu, how can i fix it?
Question
This code works great if i want to make toggle effect by clicking on the menu. You can see the result here.
$(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();
});
My problem is .menu-item a , with this the script executes the code for all links of the menu(also for links that don't have submenu links). But in my case i want to execute only for the links that contains submenu links. If i try t replace .menu-item a with .menu > ul li a doesn't work.
The structure of the html(generated by php) code is like this:
<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>
The relevant 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;
}
How can i fix it?
3 answers
solution1
1 2013-11-12 14:12:48
If I understand your question correctly (only execute if selector has children), then replace with this:
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);
});
}
}
});
solution2
1 ACCPTED 2013-11-12 14:15:23
You need to check, on the top of the function, if the current link has a submenu attached. Check the first two lines of the click callback:
$(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();
}
});
solution3
1 2013-11-12 14:40:05
I think something like this will work for what you need, it's a lot cleaner and more compact:
UPDATED: 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.