javascript - 如何禁用链接但保持数据切换下拉菜单正常工作

Question

我正在使用 Bootstrap 制作菜单。

菜单有 3 级。 主>第一个子菜单>第二个子菜单

第一个子菜单中包含第二个子菜单的菜单项也需要可单击。这已经起作用了。子菜单在桌面上通过悬停显示，但在移动设备上，您需要单击菜单项才能打开子菜单。所以在移动设备上，我希望这个 href 消失。

目前我正在使用此代码在移动设备上删除它:

if ($(window).width() > 768) {
    if ($(window).width() < 768) {
        $(".dropdown-toggle").each(function(){
            $(".dropdown-toggle").removeAttr("data-target");
            $(".dropdown-toggle").removeAttr("href");
        })  
    } 

    $(window).resize(function() {
        if ($(window).width() < 768) {
            $(".dropdown-toggle").each(function(){
                $(".dropdown-toggle").removeAttr("href");
            })  
        }
    });
});

但此代码的问题在于，当您返回到高于 768 的分辨率时，它仍然消失。当您在平板电脑上进入横向模式时，就会发生这种情况。

我已经在寻找这个了。我发现您可以添加“disabled”类，或者可以使用pointer-events:none 对其进行样式设置。但所有这些解决方案也会禁用 data-toggle="dropdown"功能...

那么我如何才能禁用 href 但保持数据切换工作呢？

提前致谢!

这是我使用的 html，以防万一:

<nav class="navbar navbar-default lumenisInnerMenu" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        </div>
        <div class="collapse navbar-collapse lumenisListItems">
            <ul class="nav navbar-nav">
                [*>NODE]
            </ul>
        </div>
    </div>
</nav>

[>NODE]
    <li class="[?SELECTED]dir current[/?][?NODE] dropdown-submenu HasChildren child[=DEPTH] dropdownmenu [/?]">
    [?ENABLED]
        <a href="[=URL]" class="[?NODE] dropdown-toggle[/?]" [?NODE] data-target="[=URL]" data-toggle="dropdown" [/?]>
                <div class="textsubitem">
                    <span>[=TEXT]</span>
                </div>
        </a>
    [?ELSE]
        <a href="#" [?NODE] [/?]> [?NODE]
            <span>[=TEXT]</span>[/?]
        </a>
    [/?]
    [?NODE]
        <ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
            [*>NODE]
        </ul>
    [/?]
    </li>
[/>]

Answer 1

就用这个。

<a href="javascript:void(0)" >Anything goes here</a>

不要使用

$(".dropdown-toggle").removeAttr("href");

有了这个