两个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>

Jfiddle

来源

2014-09-20 user1447958

是否可以设置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

尝试检查元素是否分别具有类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(); 
    }); 
});

Updated Fiddle

仅供参考：您不需要多个ready()处理程序...

来源

2014-09-20 22:55:07

它更好地接近固定...当点击菜单按钮时它会关闭搜索盒子，反之亦然。现在唯一破碎的是当我用搜索按钮打开搜索框时，我需要点击搜索按钮或菜单按钮切换关闭。当我关闭文档中的其他位置时，搜索框会打开。 – user1447958 2014-09-20 22:59:37

@ user1447958是的，我错过了你的一个身体点击处理程序，同时发布... http://jsfiddle.net/goyuhekp/9/ – 2014-09-20 23:07:12

两个jQuery菜单，打开一个关闭另一个，从来没有同时打开

回答

相关问题