正文单击以隐藏元素答案

【问题标题】：Body Click to Hide Element正文单击以隐藏元素
【发布时间】：2016-02-03 02:02:44
【问题描述】：

我正在制作这个网站，并且我有一个隐藏的菜单，到目前为止它可以正常工作，但我希望当它可见时可以选择单击主体以使其隐藏。

到目前为止，我有这段代码，但它不起作用，因为我在可待因上编码，它给了我错误“尝试分配只读属性”，另外，使整个页面消失。

这是我的这段代码，我也在这个网站 parallax.js 和 fullPage.js 中使用

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

    //if ($menu_visivel) {

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

      //});

    //} else {

    //};
//}

这是完整的 Pen 和 debug 页面。非常感谢。

【问题讨论】：

你的笔没有显示任何东西。请仔细检查。同时，您可以执行以下操作： $("需要隐藏的元素").parentsUntil("body").click(function() { //hide your element here });
我仔细检查了笔的作品
这是错误：“ERR_BLOCKED_BY_CLIENT”我认为您的 Pen 处于私密模式，因此只有您可以看到它。
试试这个，它已经用你已经提供的代码更新了：jsfiddle.net/angus/qyqu96e3/2

标签： jquery html css menu fullpage.js

【解决方案1】：

查看CODEPEN 中的工作示例。

您可以向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> 标签上的垂直滚动条不会在需要时显示。

【讨论】：

你能帮我解决这个问题吗？我想删除当前的 parallax.js，因为它弄乱了我的整个代码，只是我找不到做同样工作的替代品 D：
您是否要进行整页布局？如果是这样，你最好使用这个插件：alvarotrigo.com/fullPage/#secondPage
我正在使用的那个啊
别忘了接受我的回答，如果它回答了你的问题，请给它投票。
好吧，它没有，因为我有一个特定的按钮来显示和隐藏“.menu”，点击正文是一个附加功能。除非我理解错误的答案。另外，使用 fullPage.js 我可以在 div 上滚动而无需进入下一部分，关于如何解决的想法？