JavaScript（一键打开和关闭某物）答案

【问题标题】：JavaScript (Have one button open and close something)JavaScript（一键打开和关闭某物）
【发布时间】：2016-07-15 00:59:36
【问题描述】：

我目前有一个汉堡菜单，当你点击汉堡时，它会变成一个 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>

【问题讨论】：

问题是？
只使用一个事件和一个变量来保存它是打开还是关闭。
你还在用jQuery吗？我看到你用 jQuery 标记了这个问题，但我没有看到你的页面中包含 jQuery 脚本。

标签： javascript jquery html css

【解决方案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/

【讨论】：

【解决方案2】：

一个简单的解决方法是为该按钮分配两个类。说 class="Original Open"，即一个 class= Original，另一个 class=Open

现在在您的 Javascript 文件中，您通过首先找到原始类为 Open 类编写一个 onclick 函数。在该 onclick 函数中，您显示菜单容器，当您第一次单击该按钮时，向该按钮添加另一个类说“关闭”时间并删除“Open”类。

现在为“关闭”类编写 onclick 函数，该函数隐藏您的菜单并删除该类“关闭”并再次添加“打开”类。

简单的逻辑..!!

【讨论】：

【解决方案3】：

这是我用的。

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

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

【讨论】：

这是一个很好的 jquery，但看起来 OP 在他的脚本中没有使用 jquery
我不认为 OP 正在使用 jquery，但这是最简单的方法。
我认为问题的 jQuery 标记是由 OP 放在那里的。

【解决方案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>

【讨论】：