Body Нажмите, чтобы скрыть элемент

Question

У меня есть этот сайт, который я делаю, и у меня есть скрытое меню, которое до сих пор работает правильно, но я хочу, чтобы, когда видно, есть возможность щелкнуть по телу, чтобы сделать это скрывать.

До сих пор у меня этот код, но он не работает, поскольку я кодирую коде, он дает мне ошибку «Попытка назначить свойство readonly», плюс, делает всю страницу исчезающей.

Вот мой код для этого сегмента, я использую также на этом сайте parallax.js и fullPage.js

//function hideMenu { 
    //var $menu_visivel = $('.menu2').is(":visible"); 

    //if ($menu_visivel) { 

     //$('body').click(function() { 

     //}); 

    //} else { 

    //}; 
//} 

Вот полный Pen и debug страница. Большое спасибо заранее.

Answer 1

Ознакомьтесь с рабочим примером в CODEPEN.

Чтобы скрыть элемент, вы можете добавить событие click для document. В то же время, вам нужно добавить stopPropagation событие к элементу, а также:

$(document).click(function(event) { 
    //check out for clicking on any element but .menu and .menuButton 
    if(!$(event.target).closest('.menu, .menuButton').length && !$(event.target).is('.menu, .menuButton')) { 
     // check if the .menu is already shown 
     if($('.menu').css("left") == "0px") { 
      $(".menu").animate({ 
       left: "-200px" 
      },200); 
     } 
    }  
}); 

показать на .menuButton и спрятаться во время загрузки:

$(".menu").animate({ 
    left: "-200px" 
},200); 

$(".menuButton").click(function() { 
    // you can easily enhance it for hiding as well 
    $(".menu").animate({ 
    left: "0" 
    },200); 
}); 

Этот пример ясно показывает, что parallax плагин возится с вашим кодом.

Кстати, у вас есть дополнительный $(document).ready() внутри самого дальнего. Вам нужно вытащить его. Кроме того, трюк в этот момент работает только тогда, когда вы щелкните правой кнопкой мыши один раз на своей странице. Только левый клик не работает. По моему наблюдению, и этот полезный пост HERE, это может быть из-за плагина, потому что вертикальная полоса прокрутки на вашем теге <p> не отображается, если это необходимо, если вы не щелкните правой кнопкой мыши на странице.