JavaScript（有一个按钮打开和关闭的东西）

我目前有一个汉堡菜单，当你点击汉堡时，它会变成一个x。我想要它，所以当你点击汉堡时，它会打开菜单，如果你点击x，它会关闭菜单。JavaScript（有一个按钮打开和关闭的东西）

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

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

来源

2016-07-14 Henry Weng

而问题是什么？ –

只需使用一个事件和一个变量，该变量在打开或关闭时进行保存。 – Shilly

你甚至使用jQuery？我看到你用jQuery标记了这个问题，但我没有看到你的页面中包含了一个jQuery脚本。 – KevBot

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

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/

来源

2016-07-14 16:31:37

这是我使用。

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

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

来源

2016-07-14 16:31:55 Okomikeruko

这是很好的jQuery，但它看起来不像OP在他的脚本中使用jquery – CodeMoose

我不认为OP使用jQuery，但这是最简单的方法。 –

一个简单的解决方法是具有分配给该按钮两个类。说类=“原始的开放式”，即一类=原始，其他类=打开

在你的JavaScript文件

现在，你通过首先找到原始class.In说的onclick函数写公开课一个onclick功能，你看菜单容器，当你第一次点击它并添加“打开”类时，向该按钮添加另一个类“关闭”。

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

简单的逻辑..！

来源

2016-07-14 16:33:40

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>

来源

2016-07-14 16:59:36

JavaScript（有一个按钮打开和关闭的东西）

回答

相关问题