Question

按菜单按钮后，如何使用选项在网站左侧添加框架？

这是相关的html

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

这里是相关的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

当我尝试您的代码时，我收到以下错误消息：＆＃34; ReferenceError：myFunction未定义＆＃34;

一种解决方案是跳过函数调用并直接在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/

注意：通常不鼓励onclick参数，因为它将JavaScript混合到HTML中。也许最好的方法是从HTML中删除onclick参数并从JavaScript分配click事件：

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

这是编辑过的HTML（我删除了＆＃34; onclick＆＃34;参数并添加了＆＃34; id＆＃34;参数）

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

添加带菜单按钮选项的框架？

1 个答案: