两个jQuery菜单，打开一个关闭另一个，永远不要同时打开两个

Question

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

Answer 1

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

更新的Fiddle

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