在移动设备上禁用父导航链接

Posted 2023-04-13

技术标签:

【中文标题】在移动设备上禁用父导航链接【英文标题】：Disable parent nav links on mobile devices 【发布时间】：2019-04-16 21:52:58 【问题描述】：

我在 WordPress 中有一个菜单，其中父菜单项链接到登录页面。我希望它在移动设备上只有这个链接被禁用。目前，当点击移动设备时，父项都链接到另一个页面并显示下拉菜单，所以这是一场竞赛......

我尝试使用媒体查询和指针事件：无，但在我的手机上测试时它似乎没有做任何事情。当然，子菜单链接必须继续有效。

谢谢！

 <div class="mobile-nav"><i class="glyphicon glyphicon-menu-hamburger"></i></div>
<nav id="nav" role="navigation">              
    <ul id="menu-header-menu" class="menu">
        <li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-733"><a href="#">Company</a>
            <ul class="sub-menu">
                <li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224"><a href="#">Press/News</a></li>
                <li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="#">Newsletter</a></li>
                <li id="menu-item-405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-405"><a href="#">Company History</a></li>
            </ul>
        </li>
    </ul>           
</nav>

【问题讨论】：

【参考方案1】：

既然您使用的是 WP，并且包含 jQuery，为什么不试试呢？将 1023 更改为您的移动断点。

(function($)(
 $(function()
    if($(window).width() < 1023)
      $('.menu-item-has-children').click(function(e)
        e.preventDefault();
      );
    
 );
)(jQuery);

【讨论】：