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（有一個按鈕打開和關閉的東西）

回答

相關問題