0

Есть логотип и контакты, а также меню-кнопка. При нажатии на этот menu span должен исчезнуть логотип и контакты. При нажатии на close должны появиться обратно. Как это реализовать без hide и show? Ниже немного кода без стилей. Буду также рада наводкам.

       <div class="header">
            <a class="logo">
                <div><img class="bottom-icon" src="">logo<img class="top-icon" src=""></div>
            </a>
            <span class="menu">Menu</span>
            <div class="contacts">
                <div class="contacts-location">street, France</div>
                <a class="contacts-number" href="tel:+111111" style="color:#1C150B;">+1111111</a>
            </div>
        </div>
       <div class="section section-menu"></div>
         $('.header span').click(function() {
         $(this).toggleClass("active");
         $('.section-menu').toggleClass('section-menu-visible');

         if ( $(this).hasClass("active")) {
           $('.header').addClass('header-no-color');
           $(this).text("Close");
         } else {
           $(this).text("Menu");

           setTimeout(function(){
            $('.header').removeClass('header-no-color');
          },750);

         }

       });

1 ответ 1

1

Можно добавлять класс на header, и дальше скрывать стилями. Допишу в Вашем коде:

 $('.header span').click(function() {
 	 $('.header ').toggleClass("active");
   $(this).toggleClass("active");
   $('.section-menu').toggleClass('section-menu-visible');

   if ( $(this).hasClass("active")) {
     $('.header').addClass('header-no-color');
     $(this).text("Close");
   } else {
     $(this).text("Menu");

     setTimeout(function(){
       $('.header').removeClass('header-no-color');
     },750);

   }

 });
.header.active .logo {
 display: none
}

.header.active .contacts {
 display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <a class="logo">
    <div><img class="bottom-icon" src="">logo<img class="top-icon" src=""></div>
  </a>
  <span class="menu">Menu</span>
  <div class="contacts">
    <div class="contacts-location">street, France</div>
    <a class="contacts-number" href="tel:+111111" style="color:#1C150B;">+1111111</a>
  </div>
</div>
<div class="section section-menu"></div>

1
  • 1
    $(this).closest('.header ').toggleClass("active");
    – user176262
    15 авг 2019 в 21:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.