我有一个带有子菜单项的简单引导菜单。我将子菜单项设置为在屏幕尺寸小于991px时默认隐藏。
当屏幕尺寸小于991px时，将显示自定义移动菜单。我希望移动菜单锚标签在单击时显示子菜单，而不是转到其指定的href位置。
但是，当显示子菜单并单击移动菜单锚标记时，我希望页面转到其指定的href位置。
这是我的HTML：
<nav id="navbar2" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="menu-text">Menu</span>
</button>
</div><!-- end navbar-header -->
<!-- Syed Edit -->
<div class="navbar-collapse collapse" id="responsive_nav"><div class="navbar-nav">
<ul class="nav"><li class=""><a href="/treatments/" target="_self" class="">Treatments</a><ul><li class=""><a href="/treatments/invisible-braces-invisalign/" target="_self" class="">Invisible braces (Invisalign)</a></li><li class=""><a href="/treatments/hidden-braces-lingual/" target="_self" class="">Hidden braces (Lingual)</a></li><li class=""><a href="/treatments/metal-braces-damon/" target="_self" class="">Metal braces (Damon)</a></li><li class=""><a href="/treatments/clear-tooth-coloured-braces-clarity/" target="_self" class="">Clear tooth coloured braces (Clarity)</a></li><li class=""><a href="/treatments/fast-treatment-6-months/" target="_self" class="">Fast treatment (6 months)</a></li><li class=""><a href="/treatments/the-treatment-process/" target="_self" class="">The treatment process</a></li></ul></li><li class=""><a href="/about-us/" target="_self" class="">About us</a><ul><li class=""><a href="/about-us/why-choose-us/" target="_self" class="">Why Choose us?</a></li><li class=""><a href="/about-us/what-you-need-know-about-dr-preet/" target="_self" class="">What you need to know about Dr Preet</a></li><li class=""><a href="/about-us/in-the-press/" target="_self" class="">In the press</a></li></ul></li><li class=""><a href="/meet-our-team/" target="_self" class="">Meet our team</a></li><li class=""><a href="/see-the-results/" target="_self" class="">See the results</a><ul><li class=""><a href="/see-the-results/invisalign/" target="_self" class="">Invisalign</a></li><li class=""><a href="/see-the-results/damon-braces/" target="_self" class="">Damon braces</a></li><li class=""><a href="/see-the-results/lingual-braces/" target="_self" class="">Lingual braces</a></li><li class=""><a href="/see-the-results/fast-treatment-braces/" target="_self" class="">Fast treatment braces</a></li><li class=""><a href="/see-the-results/fixed-metal-braces/" target="_self" class="">Fixed metal braces</a></li><li class=""><a href="/see-the-results/self-ligating-braces/" target="_self" class="">Self-ligating braces</a></li><li class=""><a href="/see-the-results/hidden-braces/" target="_self" class="">Hidden braces</a></li><li class=""><a href="/see-the-results/modern-fixed-braces/" target="_self" class="">Modern fixed braces</a></li></ul></li><li class=""><a href="/cost/" target="_self" class="">Cost</a><ul><li class=""><a href="/cost/price-guide/" target="_self" class="">Price guide</a></li><li class=""><a href="/cost/finance-plans/" target="_self" class="">Finance plans</a></li></ul></li><li class=""><a href="/information-for-patients/" target="_self" class="">Information for patients</a><ul><li class=""><a href="/information-for-patients/caring-for-your-appliance/" target="_self" class="">Caring for your appliance</a></li><li class=""><a href="/information-for-patients/faqs/" target="_self" class="">FAQs</a></li><li class=""><a href="/information-for-patients/common-orthodontic-problems/" target="_self" class="">Common orthodontic problems</a></li></ul></li></ul> <ul class="nav">
<li class=""><a href="/find-us/" target="_self" class="">Find us</a></li>
<li class=""><a href="/contact-us/" target="_self" class="">Contact us</a></li>
<li class=""><a href="/dentist-referrals/" target="_self" class="">Dentist referrals</a></li>
</ul>
</div></div><!-- end navbar-collapse -->
<!-- Syed Edit -->
</nav><!-- end navbar -->
这是CSS：
@media screen and (max-width: 991px) {
.navbar-nav .nav li > ul {
display: none!important;
}
}
这是我使用jQuery进行的尝试：
function(){
$(".navbar-nav .nav li a").click(function () {
e.preventDefault();
$(".navbar-nav .nav li > ul").css("display","block");
$(".navbar-nav .nav li > a").removeClass("disabled");
});
});
$('.navbar-nav .nav > li a').click(function (e) {
e.preventDefault();
if ($(this).hasClass('disabled'))
return false;
else
window.location.href = $(this).attr('href');
});
});
$(window).resize(function() {
if ($(window).width() < 991) {
$(".navbar-nav .nav li > a").addClass("disabled");
}
else {
$(".navbar-nav .nav li > a").removeClass("disabled");
}
});
最佳答案
你可以用CSS做到这一点
@media screen and (max-width: 991px) {
.navbar-nav .nav > li a {
pointer-events: none
}
}
MDN中
pointer-events: none的作用说明元素永远不是鼠标事件的目标；但是，如果鼠标后代的指针事件设置为其他值，则鼠标事件可能以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间按适当的方式在其上级/下级的后代上触发此父元素上的事件侦听器。