从左侧推/滑动菜单。需要点击整个页面来隐藏菜单？

我发现这个JSFiddle，我不知道如何解决它，所以用户可以通过点击内容中的任何地方而不是点击按钮来退出菜单。我不会有多种选择，我无法弄清楚它？从左侧推/滑动菜单。需要点击整个页面来隐藏菜单？

$(document).ready(function() { 
    $menuLeft = $('.pushmenu-left'); 
    $nav_list = $('#nav_list'); 

    $nav_list.click(function() { 
     $(this).toggleClass('active'); 
     $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 
    }); 
});

谢谢！

来源

2016-01-23 Mikkel Lehrmann

你可以在<html/>标签赶上点击和隐藏菜单：

$('html').click(function() { 
    $nav_list.removeClass('active'); 
    $('.pushmenu-push').removeClass('pushmenu-push-toright'); 
    $menuLeft.removeClass('pushmenu-open'); 
});

这需要停止事件冒泡了，所以你首先点击功能已开始

$nav_list.click(function(e) { 
    e.stopPropagation();

整件事可能肯定会被优化，但它应该给你一个开始。

这里是更新的Fiddle。

来源

2016-01-23 19:35:57

太棒了！谢谢。 –

在脚本中，我已经修改了相同的脚本有内容区域切换功能，文本“滑出式导航”

<script type="text/javascript"> 
$(document).ready(function() { 
    $menuLeft = $('.pushmenu-left'); 
    $nav_list = $('#nav_list'); 

    $nav_list.click(function() { 
     $(this).toggleClass('active'); 
     $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 
    }); 
}); 

$(document).ready(function() { 
    $menuLeft = $('.pushmenu-left'); 
    $content_list = $('#contentpane'); 
    $content_list.click(function() { 
     $(this).toggleClass('active'); 
     $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 

    }); 
}); 
</script>

的下方的区域是做HTML页面的变化。我已经添加了一个div的内容，所以点击它可以通过脚本检查

<div class="container"> 

     <div class="main"> 
     <section class="buttonset"> 
      <div id="nav_list">Menu</div> 
     </section> 

    <section class="content"> 
    <div id="contentpane"> 
     <h1>Slideout Navigation</h1> 
     <p> 

     </p> 
     </div> 
    </section><!-- End Content --> 
     </div><!-- End Main --> 
</div><!-- End Container -->

来源

2016-01-23 20:29:48 Dinesh

从左侧推/滑动菜单。需要点击整个页面来隐藏菜单？

回答

相关问题