Проблема с раскрывающимся меню мобильного телефона
Вот мой сайт: http://lowandheavy.com Проблема в том, что при открытии сайта в мобильном телефоне второе меню с названием «женщины» не работает, как меню «мужчины».
Он открывает раскрывающийся список, но сразу же перенаправляет в подменю 3. Вот код:
<ul class = "nav-menu navigation-tier navigation-tier-primary" data-navigation-tier-primary>
<li class = "has-slide-out header-navigation-item navigation-item-primary">
<a class = "navigation-link-primary" href = "/" >Home</a>
</li>
<li class = "dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class = "dropbtn navigation-link-primary" href = "#">Men</a>
<div class = "dropdown-content">
<a href = "/men/tanks/">Tanks </a>
<a href = "/men/tshirts">T-shirts</a>
</div>
</li>
<li class = "dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class = "dropbtn navigation-link-primary" href = "#">Women</a>
<div class = "dropdown-content">
<a href = "/women/leggings/">Leggings</a>
<a href = "/women/tanks">Tanks</a>
<a href = "/women/tshirts">T-shirts</a>
<a href = "/women/tshirts/v-neck/">V-Neck</a>
<a href = "/women/unisex-tees/">Unisex Tees</a>
</div>
</li>
<li class = "has-slide-out header-navigation-item navigation-item-primary">
<a class = "navigation-link-primary" href = "/hats/" >Hats</a>
</li>
<li class = "has-slide-out header-navigation-item navigation-item-primary">
<a class = "navigation-link-primary" href = "/about/" >About</a>
</li>
<li class = "has-slide-out header-navigation-item navigation-item-primary">
<a class = "navigation-link-primary" href = "/contact-us/" >Contact</a>
</li>
<li class = "has-slide-out header-navigation-item navigation-item-primary">
<a class = "navigation-link-primary" href = "/news-feed/" >News</a>
</li>
</ul>
@Nirali сначала откройте веб-сайт на мобильном телефоне, затем нажмите на переключатель, вы увидите список меню, после этого, когда вы нажмете на название меню Мужчины, а затем в то же время нажмите на имя меню женщины, вы обнаружите, что проблема не остается в перенаправлении
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Нажав на название меню «Мужчины», затем одновременно щелкнув на имени меню «Женщины», вы столкнулись с проблемой, что его перенаправление не прекращается.
Это не проблема Это происходит потому, что при нажатии на меню «Мужчины» открывается подменю «Мужчины». затем в то же время, щелкнув подменю женщины, откройте подменю женщины и закройте подменю «Мужчины», чтобы уменьшить разрыв между мужчинами и женщинами, если вы нажали одно из подменю «Женщина» (возможно, 2-е или 3-е подменю), а не нажали «Женщина». "меню, и вы будете перенаправлены.
Проверьте ниже фрагмент
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
<nav>
<ul class = "nav">
<li><a href = "#">Link 1</a></li>
<li><a href = "#" id = "btn-1" data-toggle = "collapse" data-target = "#submenu1" aria-expanded = "false">Link 2 (toggle)</a>
<ul class = "nav collapse" id = "submenu1" role = "menu" aria-labelledby = "btn-1">
<li><a href = "#">Link 2.1</a></li>
<li><a href = "#">Link 2.2</a></li>
<li><a href = "#">Link 2.3</a></li>
</ul>
</li>
<li><a href = "#" id = "btn-1" data-toggle = "collapse" data-target = "#submenu2" aria-expanded = "false">Link 3 (toggle)</a>
<ul class = "nav collapse" id = "submenu2" role = "menu" aria-labelledby = "btn-1">
<li><a href = "#">Link 3.1</a></li>
<li><a href = "#">Link 3.2</a></li>
<li><a href = "#">Link 3.3</a></li>
</ul>
</li>
<li><a href = "#">Link 4</a></li>
<li><a href = "#">Link 5</a></li>
</ul>
</nav>Если вы напрямую открываете «женское» меню, то вы не увидите свою проблему, потому что в это время подменю «Мужское» меню не открыто.
Я ищу решения, чтобы решить эту проблему. Я хочу, чтобы он оставался там, даже щелкая в одно и то же время.
Если одно подменю уже открыто, и вы нажимаете на другое меню, которое остается открытым над подменю, не закрывайте. Это будет работать
да, я просто хочу, чтобы оба меню были открыты, просто не хочу этого грязного перенаправления
@ R.K.Bhardwaj проверьте мой ответ, я добавил фрагмент
Lets DO the same on click
/***Add css in file***/
.dropdown.active .dropdown-content {
display: block;
}
/***Add Jquery in file***/
$('.navigation-link-primary').click(function(e){
$('.dropdown').removeClass('active');
$(this).parent().addClass('active');
});
$('.dropbtn.navigation-link-primary').click(function(e){
if ($(this).hasClass('active')) {
$("a.dropbtn.navigation-link-primary").removeClass('active');
}
else {
$(this).addClass('active');
}
});@media(max-width:850px) {
.dropdown:hover .dropdown-content {
display: none !important;
}
body.home .main-header-menu .header-navigation-item a {
width: 100% !important;
display: inline-block;
}
a.dropbtn.navigation-link-primary.active+div {
display: block !important;
}
}
В чем проблема? Я не нашел ни одного