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

您可以使用这样的切换功能：

glory

<强> HTML：

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';
}

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

Answer 2

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

现在在你的Javascript文件中，你通过首先找到原始类来为Open类编写一个onclick函数。在那个onclick函数中，你显示了Menu Container，当你点击它时，添加另一个类说“关闭”到该按钮时间并删除“打开”类。

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

简单的逻辑.. !!

Answer 3

这就是我使用的。

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

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

Answer 4

＆＃13;

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

＆＃13;

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 ----- */

＆＃13;

<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>

＆＃13;

JavaScript（打开和关闭一个按钮）

4 个答案: