gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:22:14 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 制作菜单。

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

enter image description here

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

enter image description here

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

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>
[/>]

最佳答案

就用这个。

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

不要使用

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

有了这个

关于javascript - 如何禁用链接但保持数据切换下拉菜单正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42249813/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com