我有一个主菜单的函数:
$('.main-menu-left > li > div').each(function(){
if( $(this).next('.sub-menu').length ){
$(this).on('click', function(e){
e.preventDefault();
$(this).parent('li').find('.sub-menu').slideDown('slow');
});
}
});
和一个滑动菜单的功能:
$('body').on('click', function(){
if( $('.sub-menu').is(':visible') ){
$('.sub-menu').slideUp();
}
});
<ul id="menu-left" class="main-menu-left">
<li>
<div class="group-menu"><span>Browse</span><a id="first-li"><p class="menu-text"><i class="icon-small-arrow-gold"></i>Blinds</p></a></div>
<ul class="sub-menu">
<li><a href=""><span>Explore</span><u>+</u>Wooden Blinds<b>(18 collections)</b></a>
<ul class="list-products">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<li><a class="title">Next day<p class="details">no Samples of Verticals Blinds</p></a></li>
<li><a class="title">Blackout<p class="details">96 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Pattern<p class="details">120 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Wipeable<p class="details">30 Samples of Verticals Blinds</p></a></li>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="text-explore">&explore all <s>Vertical Blinds</s> </p>
</div>
</div>
</div>
</ul>
</li>
<li><a href=""><span>Explore</span><u>+</u>Venetians Blinds<b>(20 collections)</b></a></li>
</ul>
</li>
<li class="hidden-md hidden-sm hidden-xs"><a><p class="menu-text"><i class="icon-small-arrow-gold"></i>Roman</p></a></li>
</ul>
这是html代码,用于我的菜单。
它同时打开和关闭。我该怎么做才能关闭一个li并打开另一个点击呢?
您需要绑定为不同的功能,以便您可以解除绑定,点击主体并将幻灯片打开,幻灯片关闭分开。我是这样写的:
//Wrap it in a function to avoid conflict. Pass in menu as an object we will use inside
(function ($, menu, undefined) {
//this is the initialiser function
menu.init = function() {
//Store the subNavs as a jQuery array so we can loop them
var subNavs = $('.sub-menu');
//Check there are members in the array
if( subNavs.length > 0 ){
//for each member run the initialiser
$(subNavs).each(function(i, subNav) {
//Select the head of the sub-menu in the DOM. In this case it is a sibling
$(subNav).siblings('.group-menu').on('click', function(e){
//prevent the default action of the click and stop it propagating up to the body
e.preventDefault();
e.stopPropagation();
//test if this is an open menu or closed and send each one to a different handler
if ($(subNav).hasClass('open')) {
menu.clickOff($(subNav));
}
else {
menu.clickOn($(subNav));
}
});
});
}
};
menu.clickOn = function(el) {
//set the element as 'open'
el.addClass('open');
//bind the body click handler
$('body').on('click', menu.clickBody);
//Do the slide down!
el.slideDown('slow');
};
menu.clickOff = function(el) {
//set the element as not 'open'
el.removeClass('open');
$('body').unbind('click', menu.clickBody);
//Do the slide up!
el.slideUp('slow');
};
menu.clickBody = function(e) {
//check if the target is the open menu item itself or part of it
if ($(e.target).closest('.sub-menu.open').length == 0) {
//If not, pass it through to the close handler
menu.clickOff($('.sub-menu.open'));
}
};
//call the initialiser() on page load
menu.init();
}(jQuery, window.menu = window.menu || {}, ""));
你可以在这里查看它的内容:http://fiddle.jshell.net/h6Xnb/2/
希望能有所帮助。