JavaScript（具有一个按钮可打开和关闭内容）

Question

我目前有一个汉堡菜单，当您单击该汉堡时，它将变成一个x。 我想要这样，以便当您单击汉堡包时，它将打开菜单，如果您单击x，则将关闭菜单。

到目前为止，这是我的代码。

<!DOCTYPE html>
<html>
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: .9s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
</style>
<body>

<div id="mySidenav" class="sidenav">

  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
</div>

<div id="main">
  <span style="cursor:pointer" onclick="openNav(); closeNav()>
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>
</span>
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
function myFunction(x) {
    x.classList.toggle("change");
}
</script>

</body>
</html>

Answer 1

您可以使用如下所示的切换功能：

function toggleNav() {
    var sidenav = document.getElementById("mySidenav"),
    main = document.getElementById("main");
    sidenav.style.width = sidenav.style.width === "250px" ? '0' : '250px';
    main.style.marginLeft = main.style.marginLeft === "250px" ? '0' :  '250px';
}

HTML：

<span style="cursor:pointer" onclick="toggleNav();">...</span>

演示： https ： //jsfiddle.net/iRbouh/df4cuet5/

Answer 2

一个简单的解决方法是将两个类分配给该按钮。 说class =“ Original Open”，即一个类别=原始，另一个类别=开放

现在，在您的Javascript文件中，首先找到原始类，为Open类编写一个onclick函数。在该onclick函数中，显示菜单容器，并在第一次单击该按钮时向该按钮添加另一个类，例如“ Close”，然后删除类“开放”。

现在，为类“ Close”编写onclick函数，该函数将隐藏菜单，并删除该类“ Close”并再次添加类“ Open”。

简单的逻辑..！

Answer 3

这就是我用的。

$(".button").click(function(){
  $(this).toggleClass("open close");
});

演示： https ： //jsfiddle.net/c7zrmoad/

Answer 4

 function myFunction(x) { document.getElementById("mySidenav").classList.toggle("open"); x.classList.toggle("change"); }

 body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px !important; margin-left: 50px; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: .9s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } /* ----- START ----- */ .open { width: 250px; } .open ~ #main { margin-left: 250px; } /* ----- END ----- */

 <div id="mySidenav" class="sidenav"> <a href="#">...</a> <a href="#">...</a> <a href="#">...</a> <a href="#">...</a> </div> <div id="main"> <span style="cursor:pointer"> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> </span> </div>

JavaScript（具有一个按钮可打开和关闭内容）

问题描述

4 个解决方案

解决方案1
3 2016-07-14 16:31:37

解决方案2
2 2016-07-14 16:33:40

解决方案3
1 2016-07-14 16:31:55

解决方案4
0 2016-07-14 16:59:36

JavaScript（具有一个按钮可打开和关闭内容）

问题描述

4 个解决方案

解决方案1 3 2016-07-14 16:31:37

解决方案2 2 2016-07-14 16:33:40

解决方案3 1 2016-07-14 16:31:55

解决方案4 0 2016-07-14 16:59:36

解决方案1
3 2016-07-14 16:31:37

解决方案2
2 2016-07-14 16:33:40

解决方案3
1 2016-07-14 16:31:55

解决方案4
0 2016-07-14 16:59:36