1

столкнулся с такой проблемой, есть меню, на десктопе оно прекрасно работает, на мобильной версии при нажатии на кнопку меню сразу же пропадает

Ниже код:

$(document).ready(function() {
  var res = $(".dropdown-menu");
  $(".menu-burger").on("click", funk);
  $(document).click(function (e) {
    if (!$(e.target).parents().hasClass('menu-burger')) funk(false);
  });
  
  function funk(flag) {
    if (res.css("display") == "none" && flag) {
      res.fadeIn(300);
    } else {
      res.fadeOut(300);
    }
  }
});
.header__headings {
  color: red;
  font-weight: bold;
}

.header__burger-mobile {
  color: blue;
  font-weight: bold;
  padding-top: 15px;
}

.dropdown-menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="header__headings menu-burger">
                <span class="burger"></span>
                <span class="title">Все рубрики</span>
            </div>
<div class="header__burger-mobile menu-burger">Меню</div>

<div class="dropdown-menu">
    <div class="dropdown-menu__caption"># Все рубрики</div>
    </div>

Как можно решить данную проблему?

0

1 ответ 1

1

Вы при проверке обращаетесь к родительскому элементу:

!$(e.target).parents().

И в обычной версии он есть. А в мобильной просто текст внутри дива, а его родитель уже не имеет класса menu-burger. Заверните текст в span и будет работать так же.

$(document).ready(function() {
  var res = $(".dropdown-menu");
  $(".menu-burger").on("click", funk);
  $(document).click(function(e) {
    if (!$(e.target).parents().hasClass('menu-burger')) funk(false);
  });

  function funk(flag) {
    if (res.css("display") == "none" && flag) {
      res.fadeIn(300);
    } else {
      res.fadeOut(300);
    }
  }
});
.header__headings {
  color: red;
  font-weight: bold;
}

.header__burger-mobile {
  color: blue;
  font-weight: bold;
  padding-top: 15px;
  width: 50px;
  height: 20px;
  background-color: #f0c;
}

.dropdown-menu {
  display: none;
}

.header__burger-mobile span {
  width: 100%;
  height: 100%;
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="header__headings menu-burger">
  <span class="burger"></span>
  <span class="title">Все рубрики</span>
</div>
<div class="header__burger-mobile menu-burger"><span></span></div>

<div class="dropdown-menu">
  <div class="dropdown-menu__caption"># Все рубрики</div>
</div>

3
  • У меня коде получается так <div class="header__burger-mobile menu-burger"><span></span></div> и все равно меню пропадает 26 июн 2020 в 18:56
  • Нужно стилями этот блок сделать шириной и высотой равным родителю, отредактировал ответ, можно так например. То есть у вас же наверняка там картинка какая-то или что-то еще, сделайте этот span так, чтобы кликали по нему, а не по родителю. 26 июн 2020 в 19:04
  • Спасибо большое за помощь) 26 июн 2020 в 20:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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