为什么我的Javascript代码只能在控制台中运行？

Question

我有一个功能，应该在点击后进行切换，

但这行代码在第一次点击后无法完成工作。

var toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';

• 只有我在控制台中执行它才有效..

Plunker： https://embed.plnkr.co/B5iFwB/

Answer 1

您看到此行为是因为您的代码引用了在同一语句中声明的变量toggle。它在控制台中工作，因为到第二次评估表达式时toggle现在存在。

我无法建议改进，因为我不知道您希望函数如何工作，因为在语句评估之前，您没有为toggle定义初始值。

此外，您正在使用jQuery，但在jQuery事件处理程序中使用Vanilla.js代码样式。您应该将代码更改为更一致：要么只使用idiomtic jQuery，要么使用惯用的Vanilla.js。

Answer 2

var toggle位于非全局的块内，您需要编写如下代码：

var toggle;
document.querySelector('.btn-menu').addEventListener('click', function(){
    toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
});

Answer 3

不需要toggle

您应该检查元素上是否有open类，然后将其删除，否则添加它。您可以使用.classList.add和.classList.remove来实现此目的：

Updated Code

示例：

＆＃13;

＆＃13;

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')
})

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

Answer 4

将此添加到您的代码中，它将从上到下进行切换，

  $('.btn-menu').on('click',function(){
$('header nav ul').slideToggle( "slide" );

}）;

您还需要在代码中添加JQuery。把它添加到脑中

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>