javascript - 移动菜单下拉问题

标签 javascript jquery css

这是我的网站:http://lowandheavy.com 问题是,当网站在移动设备中打开时,名称为“women”的第二个菜单不像菜单“men”那样工作。

它打开下拉菜单,但立即重定向到子菜单 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>

最佳答案

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

关于javascript - 移动菜单下拉问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50367878/

相关文章:

javascript - 当我使用小写字母时,为什么正则表达式会失败?

javascript - 模糊事件 : get the element clicked from inside the blur event

javascript - 时间选择在 jquery 中不起作用

javascript - 如何让元素的背景显示其父背景?

jquery - Opera Mobile 和 jQuery Mobile 选择菜单显示错误

javascript - 纹理未正确映射到正方形 WebGL

javascript - Angular 文件管理器的使用。如何?

javascript - 如何借助 jQuery 创建回调优先级队列?

php - Javascript 或 jQuery 中的计数器

javascript - 当使用 Javascript 选择链接时,如何隐藏 HTML 元素?