我想通过单击相同的按钮关闭此侧边栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>



<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
</ul>

</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Sidebar</button>  
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>

</body>
</html>

当我单击按钮时，侧边栏会打开内容，当我单击 X 标记位于侧边栏的右侧。但是，我想在打开时使用相同的按钮关闭此侧边栏。但是，我也想在侧边栏中保留x标记。我的想法是，如果打开侧边栏，可以通过单击相同的按钮将其关闭。

试试这个，

在这里，toggleclass()用于在单击一个☰ Sidebar或x按钮的同时切换打开类。

在 css 中添加新样式

#mySidebar.open{ width:250px; }
#main.open{ margin-left:250px; }

在 html 代码中添加更改

在两个click()事件调用OpenOrClose()函数中。

<a href="javascript:void(0)" class="closebtn text-white" onclick="OpenOrClose()">×</a> 
<button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>

结果：

function OpenOrClose() {
document.getElementById("mySidebar").classList.toggle("open");
document.getElementById("main").classList.toggle("open");
}

body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
#mySidebar.open{width:250px;}
#main.open{margin-left:250px;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn text-white" onclick="OpenOrClose()">×</a>

<ul class="list-unstyled bg-info text-white">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed text-white">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#" class="text-white">Home 1</a></li>
<li><a href="#" class="text-white">Home 2</a></li>
<li><a href="#" class="text-white">Home 3</a></li>
</ul>
</li>
<li><a href="#homeSubmenu" class="text-white">About</a></li>
<li><a href="#homeSubmenu" class="text-white">Blog</a></li>
</ul>

</div>
<div id="main">
<button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>  
</div>

</body>
</html>

切换一个类而不是更改样式属性，这样做你只需要一个函数，所以我称之为toggleNav。

新的 CSS：

#mySidebar.active{
width: 250px;
}
#main.active{
margin-left: 250px;
}

新的Javascript：

function toggleNav() {
document.getElementById("mySidebar").classList.toggle("active");
document.getElementById("main").classList.toggle("active");
}

更新您的 HTML，将所有点击替换为：onclick="toggleNav()"

使用 js 切换函数

在您想要的任何地方添加类toggleBtn..它将起作用...

document.querySelectorAll(".toggleBtn").forEach(function(el){
el.addEventListener('click',function(e){
e.preventDefault();
document.getElementById("mySidebar").classList.toggle('width');
document.getElementById("main").classList.toggle('margin');
})
})

body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
.width{
width: 250px;

}
.margin{
margin-left:250px;
}
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}

<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="openbtn toggleBtn" >×</a>



<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
</ul>

</div>
<div id="main">
<button class="openbtn toggleBtn" >☰ Sidebar</button>  
</div>

只需添加一点(和简单的)javascript即可更改属性。

在openNav()函数中，添加一行，将 onclick 转到closeNav()。此外，向按钮添加id，以便能够更改特定于所需按钮的属性。

<button id="btn123" class="openbtn" onclick="openNav()">☰ Sidebar</button>
<!-- adding id -->
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("btn123").setAttribute("onclick", "closeNav()");
// add this line to set the attribute
}

并且还要做相反的操作：在closeNav()函数中，将onclick属性设置为如下所示openNav()：

document.getElementById("btn123").setAttribute("onclick", "openNav()");

在这种情况下，您可以在不使用帮助程序类的情况下执行此操作，并将这两个函数合并到一个名为manageNav()的函数中。下面是一个示例：

function manageNav() {
document.getElementById("mySidebar").style.width == "0px" || document.getElementById("mySidebar").style.width == 0 ? document.getElementById("mySidebar").style.width = "250px" : document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft == "0px" || document.getElementById("main").style.marginLeft == 0 ? document.getElementById("main").style.marginLeft = "250px" : document.getElementById("main").style.marginLeft = "0px";
}

body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="manageNav()">×</a>

<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="manageNav()">☰ Sidebar</button>
</div>

你可以按照@imvain2说的去做。

或者你可以按照@php123所说的去做：onclick属性的值在单击打开时将其更改为"closeNav()"，当单击以关闭时将其更改为"openNav()"。

假设您的按钮有 id="sideBarBtn">

然后

function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
//extra line down here
document.getElementById("sideBarBtn").setAttribute("onclick" , "closeNav()");
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
//extra line down here
document.getElementById("sideBarBtn").setAttribute("onclick" , "openNav()");
}

相关内容

最新更新

热门标签：