单击它或在其外部关闭菜单

Question

我在这个html的框中有一个导航：

<nav class="menu" id="theMenu">
    <div class="menu-wrap">
        <h1 class="logo"><a href="index.html#home">LOGO</a></h1>

        <i class="icon-remove menu-close"></i>

        <a href="#headerwrap">HOME</a>
        <a href="#information">INFO</a>
        <a href="#portfolio">Portfolio</a>
    </div>

    <!-- Menu button -->
    <div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>

这个jQuery：

;(function(){

        // Menu settings
        $('#menuToggle, .menu-close').on('click', function(){
            $('#menuToggle').toggleClass('active');
            $('body').toggleClass('body-push-toleft');
            $('#theMenu').toggleClass('menu-open');
        });

     })(jQuery)

当我点击菜单按钮但是当我点击外面时，你能帮助我并写下我在js中添加的关闭我的菜单的内容吗？

Answer 1

您可以绑定整个身体，例如：

$(window).on('click', function() {
   $('#theMenu').removeClass('menu-open');
})

就是这样。 如果'themenu'有类'menu-open'，则在窗口点击该类将被删除。

修改

否则，您可以考虑此DEMO中的示例。

Answer 2

$(document).ready(function(){

 $('#menuToggle, .menu-close').click(function() {

 $('toggle dive id').slideToggle('slow');

});

});