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

时间:2017-01-09 11:33:18

标签: javascript

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

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

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

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

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

enter image description here

4 个答案:

答案 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来实现此目的:

Updated Code

示例:



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;
&#13;
&#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>