两个jQuery菜单,打开一个关闭另一个,从来没有同时打开
我有两个jQuery的菜单,一个滑动菜单的导航和另一个本质上只是一个搜索框。我遇到的问题是我需要它,以便两个菜单永远不会同时打开。两个jQuery菜单,打开一个关闭另一个,从来没有同时打开
通过单击各自的按钮可以完美地打开和关闭这两个菜单。另外当我点击页面上的其他地方时,关闭打开的菜单。
除了 - 除非说导航菜单打开,我点击搜索按钮。或者相反,当我打开搜索框并点击导航菜单按钮时。
这里是jQuery的我迄今...任何帮助是极大的赞赏...
$(document).ready(function() {
$('.search').click(function(e){
e.stopPropagation();
if ($(this).hasClass('active')) {
$('.search_area').fadeOut(1);
$(this).removeClass('active'); }
else {
$('.search_area').fadeIn(1);
$(this).addClass('active'); }
});
function closeSearch() {
$('.search_area').fadeOut(1);
$('.search').removeClass('active');
}
$(document.body).click(function(e) { closeSearch(); });
$(".search_area").click(function(e) { e.stopPropagation(); });
});
var slideMenu = $('.panel');
var slideMenuWidth = $('.panel').width();
$(document).ready(function() {
$('.flip').click(function(e){
e.stopPropagation();
if ($(this).hasClass('open')) {
slideMenu.animate({ left: -slideMenuWidth }, 300);
$(this).removeClass('open'); }
else {
slideMenu.animate({ left: "0px" }, 300);
$(this).addClass('open'); }
});
function closeMenu() {
slideMenu.animate({ left: -slideMenuWidth }, 300);
$('.flip').removeClass('open');
}
$(document.body).click(function(e) { closeMenu(); });
$(".panel").click(function(e) { e.stopPropagation(); });
});
</script>
尝试检查元素是否分别具有类open
和active
和调用对应的功能如下:
$(document).ready(function() {
$('.search').click(function (e) {
e.stopPropagation();
if ($('.flip').hasClass("open")) closeMenu();
if ($(this).hasClass('active')) {
$('.search_area').fadeOut(1);
$(this).removeClass('active');
} else {
$('.search_area').fadeIn(1);
$(this).addClass('active');
}
});
function closeSearch() {
$('.search_area').fadeOut(1);
$('.search').removeClass('active');
}
$(".search_area").click(function (e) {
e.stopPropagation();
});
var slideMenu = $('.panel');
var slideMenuWidth = $('.panel').width();
$('.flip').click(function (e) {
if ($('.search').hasClass("active")) closeSearch();
e.stopPropagation();
if ($(this).hasClass('open')) {
slideMenu.animate({
left: -slideMenuWidth
}, 300);
$(this).removeClass('open');
} else {
slideMenu.animate({
left: "0px"
}, 300);
$(this).addClass('open');
}
});
function closeMenu() {
slideMenu.animate({
left: -slideMenuWidth
}, 300);
$('.flip').removeClass('open');
}
$(document.body).click(function (e) {
closeMenu();
closeSearch();
});
$(".panel").click(function (e) {
e.stopPropagation();
});
});
仅供参考:您不需要多个ready()
处理程序...
它更好地接近固定...当点击菜单按钮时它会关闭搜索盒子,反之亦然。现在唯一破碎的是当我用搜索按钮打开搜索框时,我需要点击搜索按钮或菜单按钮切换关闭。当我关闭文档中的其他位置时,搜索框会打开。 – user1447958 2014-09-20 22:59:37
@ user1447958是的,我错过了你的一个身体点击处理程序,同时发布... http://jsfiddle.net/goyuhekp/9/ – 2014-09-20 23:07:12
是否可以设置jsfiddle? – alkis 2014-09-20 22:28:18
我会尝试...现在你可以看看测试网站:http://everymountain.co/ – user1447958 2014-09-20 22:37:41
添加JFiddle高于 – user1447958 2014-09-20 22:56:29