移动菜单下拉问题

Question

这是我的网站：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>

Answer 1

通过单击菜单名称男性，然后同时单击菜单名称女性，您将面临无法保持重定向的问题

这不是问题 发生这种情况是因为当您单击“男士”菜单时，它会打开男士的子菜单。然后同时点击女人打开的女人子菜单和“男人”的子菜单关闭，这样男女之间的差距就缩小了，你直接点击了“女人”的子菜单之一（可能是第 2 或第 3 个子菜单）没有点击“女人” " 菜单，你会被重定向。

检查下面的sn-p

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

如果您直接打开“女性”菜单，那么您将看不到您的问题，因为当时“男性”菜单的子菜单未打开

Answer 2

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');
 });

Answer 3

$('.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;
}
}