Question

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

到目前为止，我有这段代码，但它不起作用，因为我在codeine上编码它会给我错误＆＃34;尝试分配readonly属性＆＃34;，加上整个页面消失了。

以下是此段的代码，我也在本网站使用parallax.js和fullPage.js

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

    //if ($menu_visivel) {

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

      //});

    //} else {

    //};
//}

以下是完整的Pen和debug页面。非常感谢提前。

Answer 1

Check out a working example in CODEPEN.

You can add a click event to document to hide the element. At the same time, you need to add a stopPropagation event to the element as well:

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

To show on .menuButton and hide at the loading time:

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

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

This example clearly shows that parallax plugin is messing up with your code.

By the way, you have an extra $(document).ready() inside of the outermost one. You need to take it out. Additionally, the trick at this moment is working only when you right-click once on your page. Only left-click does not work. Per my observation, and this useful post HERE, it might because of the plugin because the vertical scrollbar on your <p> tag does not show up when needed unless you right-click on the page.

正文单击以隐藏元素

1 个答案: