我有一个功能,应该在点击后进行切换,
但这行代码在第一次点击后无法完成工作。
var toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
Plunker: https://embed.plnkr.co/B5iFwB/
答案 0 :(得分:2)
您看到此行为是因为您的代码引用了在同一语句中声明的变量toggle
。它在控制台中工作,因为到第二次评估表达式时toggle
现在存在。
我无法建议改进,因为我不知道您希望函数如何工作,因为在语句评估之前,您没有为toggle
定义初始值。
此外,您正在使用jQuery,但在jQuery事件处理程序中使用Vanilla.js代码样式。您应该将代码更改为更一致:要么只使用idiomtic jQuery,要么使用惯用的Vanilla.js。
答案 1 :(得分:2)
var toggle
位于非全局的块内,您需要编写如下代码:
var toggle;
document.querySelector('.btn-menu').addEventListener('click', function(){
toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
});
答案 2 :(得分:0)
不需要toggle
您应该检查元素上是否有open
类,然后将其删除,否则添加它。您可以使用.classList.add
和.classList.remove
来实现此目的:
document.querySelector('.btn-menu').addEventListener('click', function() {
var nav = document.querySelector('header nav ul');
if (nav.classList.contains('open'))
nav.classList.remove('open')
else
nav.classList.add('open')
})

body {
margin-top: 80px;
}
header {
width: 100%;
}
header .btn-menu{
background: #e5e5e5;
direction: rtl;
font-size: 25px;
padding-right: 10px;
cursor: pointer;
}
header nav ul {
margin: 0;
list-style-type: none;
text-align: center;
background-color: #1b2125;
height: 0;
}
header nav ul.open {
height: auto;
}
header nav li a {
color: #fff;
}

<header>
<nav>
<div class="btn-menu">≡</div>
<ul>
<li><a href="">Home</a>
</li>
<li><a href="">About</a>
</li>
<li><a href="">Services</a>
</li>
</ul>
</nav>
</header>
&#13;
答案 3 :(得分:0)
将此添加到您的代码中,它将从上到下进行切换,
$('.btn-menu').on('click',function(){
$('header nav ul').slideToggle( "slide" );
});
您还需要在代码中添加JQuery。把它添加到脑中
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>