JavaScript（ボタンを1つ開いて何かを閉じる）

私は現在、ハンバーガーメニューを持っています。ハンバーガーをクリックすると、xに変わります。ハンバーガーをクリックするとメニューが開き、xをクリックするとメニューが閉じます。JavaScript（ボタンを1つ開いて何かを閉じる）

これまでのコードです。

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

そして、質問はありますか？ –

は、1つのイベントと、それが開いているか閉じているかを保存する変数を使用します。 – 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を使用しているとは思わないが、これは最も簡単な方法です。 –

簡単な修正は、そのボタンに割り当てられた2つのクラスを持つことです。 Say class = "Original Open"つまり1つのクラス=オリジナル、別のクラス= Open

JavaScriptのファイルでは、まずOpenClassの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（ボタンを1つ開いて何かを閉じる）

答えて

関連する問題