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();
  });
});

Updated Fiddle

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

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

1 个答案: