У меня есть функция, которая должна делать переключение после щелчка,

Но эта строка кода не выполняет работу после первого клика.

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

  • только если я выполню это в консоли, это работает ..

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

enter image description here

0
Moti Winkler 9 Янв 2017 в 14:33

4 ответа

Лучший ответ

var toggle находится внутри блока, который не является глобальным, вам нужно написать такой код:

var toggle;
document.querySelector('.btn-menu').addEventListener('click', function(){
    toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
});
2
Sanjay Nishad 9 Янв 2017 в 11:37

Там нет необходимости 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>
0
Rajesh 9 Янв 2017 в 11:43

Вы видите это поведение, потому что ваш код ссылается на переменную toggle, которая объявлена в том же выражении. Он работает в консоли, поскольку к тому времени, когда выражение вычисляется во второй раз, toggle уже существует.

Я не могу предложить улучшения, потому что я не знаю, как вы ожидаете, что функция будет работать, учитывая, что вы не определяете начальное значение для toggle до того, как ваш оператор оценит.

Кроме того, вы используете jQuery, но используете стиль кода Vanilla.js в вашем обработчике событий jQuery. Вы должны изменить свой код, чтобы он был более последовательным: либо используйте только идиоматический jQuery, либо идиоматический Vanilla.js.

2
Dai 9 Янв 2017 в 11:36

Добавьте это к своему коду, он будет переключаться сверху вниз,

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

});

Также вам нужно добавить JQuery в ваш код. Добавьте это в вашу голову

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
0
PMArtz 9 Янв 2017 в 11:55