メニューボタンにオプション付きフレームを追加しますか？

Question

メニューボタンを押した後、オプションを使ってウェブサイトの左側にフレームを追加するにはどうすればよいですか？

は、ここでは、ここでは関係CSS

.container { 
    display: inline-block; 
    cursor: pointer; 
} 

.bar1, .bar2, .bar3 { 
    width: 35px; 
    height: 5px; 
    background-color: #fff; 
    margin: 6px 0; 
    transition: 0.4s; 
} 

/* Rotate first bar */ 
.change .bar1 { 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; 
    transform: rotate(-45deg) translate(-9px, 6px) ; 
} 

/* Fade out the second bar */ 
.change .bar2 { 
    opacity: 0; 
} 

/* Rotate last bar */ 
.change .bar3 { 
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ; 
    transform: rotate(45deg) translate(-8px, -8px) ; 
} 

がここにある関連JS

私はあなたのコードを試してみました

function myFunction(x) { 
    x.classList.toggle("change"); 
} 

Answer 1

ある関連のhtml

<div class="container" onclick="myFunction(this)"> 
    <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div> 

です私はフォローしている"ReferenceError：myFunctionが定義されていません"

解決策の1つは、関数呼び出しをスキップして、onclickパラメータ内で直接トグルコードを移動することです。ここで

<div class="container" onclick="this.classList.toggle('change')"> 
    <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div> 

は、この作業の例です：https://jsfiddle.net/k84vcbu2/

注：それはあなたのHTMLにJavaScriptを混入するのでonclickのパラメータは、一般的に、お勧めしません。おそらく最善のアプローチは、あなたのHTMLからのonclickパラメータをドロップするとJavaScriptからのクリックイベントを割り当てることです：

document.getElementById('container1').addEventListener('click',function() { 
    this.classList.toggle('change') 
    }) 

そして、ここで編集したHTMLです（私は「onclickの」パラメータを削除し、「ID」パラメータを追加しました）

<div class="container" id="container1"> 
    <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div>