Пропадает меню на мобильной версии

Question

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

Ниже код:

$(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>

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

Answer 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>

БЛОГ НА HUSL

Пропадает меню на мобильной версии

Ответы (1 шт):