Javascript Boostrap侧面切换菜单，单击退出关闭

我想使用添加侧菜单到我的网站，但我想添加功能时，点击了菜单将关闭。这是我的密码

<script>
   jQuery(document).ready(function($) {
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");

     $("#page-content-wrapper").click(function(ev){
         ev.preventDefault();
        $("#menu-toggle").click();
        $(this).off(ev);
        });

    });


           });
    </script>

jQuery（文档）.ready（函数（$）{
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
$（“#页面内容包装器”）。单击（函数（ev）{
ev.preventDefault（）；
$（“#菜单切换”）。单击（）；
美元（本）。关闭（ev）；
});
});
});

试着这样做

 <script>
   jQuery(document).ready(function($) {
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");

     $("#page-content-wrapper").click(function(ev){
         ev.preventDefault();
         $(this).off(ev);
         console.log($("#wrapper"));
         if( $( "#wrapper" ).hasClass('.toggled') ) {
           $("#menu-toggle").click();
        }

        });

    });


           });
    </script>

jQuery（文档）.ready（函数（$）{
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
$（“#页面内容包装器”）。单击（函数（ev）{
ev.preventDefault（）；
美元（本）。关闭（ev）；
log（$（“#包装器”）；
if（$（“#包装器”）.hasClass（'.toggled'））{
$（“#菜单切换”）。单击（）；
}
});
});
});

---

但是这两种方法都不能显示我想要的结果，你可以使用下面的代码块确保你的

或

的高度是

100%

，否则它不会触发任何点击事件

您只需在

Body

或父

Div

上绑定一个click事件，在该复选框中，clicked元素不是menu

边栏包装器的id，而是Toogle按钮
菜单切换

$('#wrapper').click(function(evt){
       if(evt.target.id == "sidebar-wrapper" || evt.target.id == "menu-toggle" )
          return false;
         $("#menu-toggle").click();     


});

更新

查找更新的代码段


/*作为外部资源包含的最新编译和精简的JavaScript*/jQuery（document）.ready（函数（$）{
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
});
$（“#包装器”）。单击（函数（evt）{
if（evt.target.id==“侧栏包装”| | evt.target.id==“菜单切换”）
返回false；
$（“#包装器”）.removeClass（“切换”）；
});
});
/*！
*启动引导-简单侧边栏(http://startbootstrap.com/)
*版权所有2013-2016启动引导
*麻省理工学院授权(https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
身体{
溢出x：隐藏；
}
/*切换样式*/
#包装纸{
左侧填充：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#包装器。切换{
左侧填充：250px；
}
#边栏包装{
z指数：1000；
位置：固定；
左：250px；
宽度：0；
身高：100%；
左边距：-250px；
溢出y：自动；
背景：#000；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#wrapper.toggled#侧栏包装器{
宽度：250px；
}
#页面内容包装器{
宽度：100%；
位置：绝对位置；
填充：15px；
}
#wrapper.toggled#页面内容包装器{
位置：绝对位置；
右边距：-250px；
}
/*边栏样式*/
.侧边栏导航{
位置：绝对位置；
排名：0；
宽度：250px；
保证金：0；
填充：0；
列表样式：无；
}
.侧边栏导航李{
文本缩进：20px；
线高：40px；
}
.侧边栏导航李a{
显示：块；
文字装饰：无；
颜色：#999999；
}
.侧边栏导航李a：悬停{
文字装饰：无；
颜色：#fff；
背景：rgba（255255,0.2）；
}
.侧边栏导航李a：激活，
.侧边栏导航李a：焦点{
文字装饰：无；
}
.sidebar nav>.sidebar品牌{
高度：65px；
字号：18px；
线高：60px；
}
.sidebar nav>.sidebar品牌a{
颜色：#999999；
}
.sidebar nav>.sidebar品牌a:悬停{
颜色：#fff；
背景：无；
}
@介质（最小宽度：768px）{
#包装纸{
左侧填充：0；
}
#包装器。切换{
左侧填充：250px；
}
#边栏包装{
宽度：0；
}
#wrapper.toggled#侧栏包装器{
宽度：250px；
}
#页面内容包装器{
填充：20px；
位置：相对位置；
}
#wrapper.toggled#页面内容包装器{
位置：相对位置；
右边距：0；
}
}



















简单边栏
此模板具有响应菜单切换系统。菜单在较小屏幕上显示为折叠，在较大屏幕上显示为非折叠。使用下面的按钮切换时，菜单将出现/消失。在小屏幕上，页面内容将被推离画布

确保将所有页面内容都保存在
#页面内容包装器
中

试试这个。。无论您在何处单击文档，它都会检查您是否在侧边栏菜单中单击

jQuery(document).ready(function($) {
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $("#wrapper").toggleClass("toggled");
    });
    $(document).click(function(e) {
        if ($(e.target).closest('#sidebar-wrapper').length === 0) {
            $("#wrapper").removeClass("toggled");
        }
    });
});

这是您的代码，现在检查，它工作正常

<script>
   jQuery(document).ready(function($) {
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");

     $("#page-content-wrapper").click(function(ev){
         ev.preventDefault();
         $(this).off(ev);
         console.log($("#wrapper"));
         if( $( "#wrapper" ).hasClass('toggled') ) {//  change the line [$( "#wrapper" ).hasClass('.toggled') ]
           $("#menu-toggle").click();
        }

        });

    });


           });
    </script>


jQuery（文档）.ready（函数（$）{
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
$（“#页面内容包装器”）。单击（函数（ev）{
德福
$(document).on('click', '#menu-toggle', function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    (<any>$('#wrapper.toggled').find("#sidebar-wrapper").find(".collapse")).collapse('hide');  
});