我到处都看到这个问题的变体，但没有我可以开始工作的解决方案。我无法让我的子菜单中的链接在点击时起作用。链接在主菜单中正常工作，我也可以右键单击子菜单以在新选项卡中打开链接，但不能单击。我是一个新手，努力做到这一点。我尝试改编在其他线程上发现的 javascript，但没有任何效果。我以前从未使用过 java，我不确定我是否正确使用了 dl-submenu 语法或将脚本放在正确的位置。任何帮助将不胜感激。
菜单 html:
<html>
<head>
<script src="js/jquery.js"></script>
<script type = "text/javascript" language = "javascript">
$('.dl-menu ul.dl-submenu li a') .click( function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
</script>
</head>
<div class="menu-area">
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li><a href="index.php">Home</a></li>
<li><a href="gawain.php">Story</a></li>
<li>
<a href="#">Heroes</a>
<ul class="dl-submenu">
<div class="hover_img">
<a href="gawain.php">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a>
<a href="gawain.php">Gawain<span><img src="img/gawain_main.jpg" alt="Gawain" hspace="128" height="256" /></span></a>
<a href="gawain.php">Ronin<span><img src="img/ronin_main.jpg" alt="Ronin" hspace="128" height="256" /></span></a>
<a href="gawain.php">Sharnold<span><img src="img/sharnold_main.jpg" alt="Sharnold" hspace="128" height="256" /></span></a>
<a href="gawain.php">Skrag<span><img src="img/skrag_main.jpg" alt="Skrag" hspace="128" height="256" /></span></a>
<a href="gawain.php">Walmon<span><img src="img/walmon_main.jpg" alt="Walmon" hspace="128" height="256" /></span></a>
</div>
</ul>
</li>
<li><a href="forum">Forum</a></li>
</ul>
</div>
</div>
</html>
处理子菜单的CSS:
.dl-menuwrapper li .dl-submenu {
display: none;
}
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
display: none;
}
.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
display: block;
}
.dl-menuwrapper > .dl-submenu {
position: absolute;
width: 100%;
top: 50px;
left: 0;
margin: 0;
}
来自另一个线程的解决方案，我一直试图适应但没有成功:
$('.dropdown-submenu ul.dropdown-menu li a').on('touchstart', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
最佳答案
为什么你需要javascript？您不应该只将链接放在 href 中吗？
像这样
<a href="#yourlinkhere">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a>
或者这个
<a href="yourpage.html">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a>
您的 javascript 也是错误的 - 它采用了 href <a> 的属性这是'#'，它不会去任何地方。您只需将那些“#”实例替换为指向页面、 anchor 、网站、图像等的有效链接即可。
编辑:我明白了，请尝试像这样构建您的 HTML:
<ul class="dl-menu">
<li><a href="index.php">Home</a></li>
<li><a href="gawain.php">Story</a></li>
<li>
<a href="#">Heroes</a>
<div class="hover_img">
<ul class="dl-submenu">
<li><a href="gawain.php">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a></li>
<li><a href="gawain.php">Gawain<span><img src="img/gawain_main.jpg" alt="Gawain" hspace="128" height="256" /></span></a> </li>
li<a href="gawain.php">Ronin<span><img src="img/ronin_main.jpg" alt="Ronin" hspace="128" height="256" /></span></a>
li <a href="gawain.php">Sharnold<span><img src="img/sharnold_main.jpg" alt="Sharnold" hspace="128" height="256" /></span></a>
li <a href="gawain.php">Skrag<span><img src="img/skrag_main.jpg" alt="Skrag" hspace="128" height="256" /></span></a>
you get the point <a href="gawain.php">Walmon<span><img src="img/walmon_main.jpg" alt="Walmon" hspace="128" height="256" /></span></a>
</ul>
</div>
</li>
<li><a href="forum">Forum</a></li>
</ul>
关于javascript - 子菜单链接不适用于 Bootstrap ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36231589/