我想使用https://startbootstrap.com/template-overviews/simple-sidebar/向我的网站添加侧边菜单,但我想在点击时添加功能菜单将被关闭。这是我的代码
<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>
并尝试这样做
<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>
但两种方式都没有显示我想要的结果
答案 0 :(得分:1)
您可以使用以下代码块确保 Body
或Wrapper
的身高为100%
以使其工作,否则它不会点击任何点击事件。
您只需绑定Body
或父Div
上的点击事件,在该检查中,点击的元素不是菜单sidebar-wrapper
和Toogle按钮menu-toggle
的ID。
$('#wrapper').click(function(evt){
if(evt.target.id == "sidebar-wrapper" || evt.target.id == "menu-toggle" )
return false;
$("#menu-toggle").click();
});
<强>更新强>
查找更新的代码段
/* Latest compiled and minified JavaScript included as External Resource */ jQuery(document).ready(function($) {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$('#wrapper').click(function(evt){
if(evt.target.id == "sidebar-wrapper" || evt.target.id == "menu-toggle" )
return false;
$("#wrapper").removeClass("toggled");
});
});
/*!
* Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
overflow-x: hidden;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
答案 1 :(得分:0)
答案 2 :(得分:0)
这是你的代码,现在检查,它工作正常
<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>
答案 3 :(得分:0)
$(document).on('click', '#menu-toggle', function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
(<any>$('#wrapper.toggled').find("#sidebar-wrapper").find(".collapse")).collapse('hide');
});