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

  • Z时代
  • 2024-01-10
  • 分类：问答

我怎么按菜单按钮后一帧添加到与选择网站的左侧？添加框架菜单按钮的选项？

这里是有关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"); 
}

回答：

当我想你的代码，我得到了后续荷兰国际集团的错误信息：“的ReferenceError：myFunction是没有定义”

一种解决方案是跳过函数调用，并直接将您的切换代码的​​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从JavaScript下降的onclick参数，并指定click事件：

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

，这里是编辑的HTML（我删除了“点击”参数，并添加一个“id”参数）

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

以上是 添加框架菜单按钮的选项？ 的全部内容， 来源链接： utcz.com/qa/259068.html

回到顶部