Как исправить перелючалку (клик работает только один раз)?

Question

[olya_097]

https://jsfiddle.net/nm3dz4ho/

Answer 1

[Пашенька]

Боже, больно на это смотреть

$('.main-header__info').click(function() {
  $(this).toggleClass('main-header__info__active');
  
  if ($(this).hasClass('main-header__info__active')) {
    $('.news__block').css({
      'display': 'none'
    });
    $('.main-header__mobile').css({
      'display': 'block'
    });

  } else {
    $('.news__block').css({
      'display': 'block'
    });
    $('.main-header__mobile').css({
      'display': 'none'
    });
  }

});

Как бы я написал:

document.querySelector('.main-header__info').onclick = function() {
  this.classList.toggle('main-header__info__active'); // не знаю, действительно ли вам нужен этот класс. Если нет, то можно убрать эту строку вовсе
  
  var blockNews = document.querySelector('.news__block'),
      headerMobile = document.querySelector('.main-header__mobile'); // Можно достать из этого замыкания и выбирать разово, но тогда переменные будут глобальными
           
  blockNews.style.display = getComputedStyle(blockNews).display === 'block' ? 'none' : 'block';
  headerMobile.style.display = getComputedStyle(headerMobile).display === 'none' ? 'block' : 'none';
}

Comments

[Lord_Dantes]

я извиняюсь конечно но..

уверен что хочешь увидеть это?

ахпхапахпхахпхахпахпхахпхапхахпахп

[Пашенька]

slave, ?

[olya_097]

like-a-boss, спасибо огромное
а так вообще норм делать?
не громоздко считается?

[Lord_Dantes]

like-a-boss, очень крутой код особенно с частью CSS

[olya_097]

slave, можно лучше?

[Пашенька]

olya_097, это супер-гормоздко. Я могу вам написать, как сделать элегантнее. Для этого мне нужно знать: таких блоков на странице один или может быть несколько?

[olya_097]

like-a-boss, один

[Пашенька]

slave, ты окей? Это не мой код. Я взял код из вопроса и исправил лишь в нём проблему.

[Пашенька]

olya_097, Обновил ответ.

[olya_097]

like-a-boss, спасибо

[Пашенька]

olya_097, Вы можете дальше писать на джейквери, но у вас постоянно одна грубая ошибка: вы по сто раз выбираете один и тот же элемент в DOM (а DOM операции очень дорогие для браузера). Выбрав элемент, нужно его закешировать - положить в переменную. Выполняя лишь одно это условие, ваш код будет на порядок лучше.

[Lord_Dantes]

like-a-boss, та я же не с вашего кода смеялся, а вообще с кода. Забудьте если вы так шутки воспринимаете то окей.

[olya_097]

like-a-boss, та мне самому нравится читстый
но просто такое требование на текущей работе(

Answer 2

[Alex]

Используйте hasClass
if ($('.main-header__info').hasClass('main-header__info__active')) {
а $('.main-header__info').addClass переместите в else

Comments

[olya_097]

alexjet73 все-равно не работает
https://jsfiddle.net/tLcva8bw/

[Alex]

olya_097, $('.main-header__info').addClass('main-header__info__active'); в блок else

[Alex]

olya_097,

$('.main-header__info').click(function() {
  if ($('.main-header__info').hasClass('main-header__info__active')){
    $('.news__block').css({
      'display': 'none'
    });
    $('.main-header__mobile').css({
      'display': 'block'
    });
    $('.main-header__info').removeClass('main-header__info__active');

  } else {
  $('.main-header__info').addClass('main-header__info__active');
    $('.news__block').css({
      'display': 'block'
    });
    $('.main-header__mobile').css({
      'display': 'none'
    });
  }

});

[olya_097]

alexjet73, спасибо