Bootstrap 3 Navbar 下拉切换禁用 <a> 标签 href 链接

Question

我正在支持客户的 wordpress 网站。他们的菜单运行不佳，所以我不得不为他们开发所有新菜单（一个看起来像旧菜单但反应灵敏的菜单）。由于不同的原因，我无法将其更新到 bootstrap 4 版本。

所以，我的问题是，它在大屏幕上运行得非常好。但是对于较小的屏幕，我无法启用标签的 href 链接（下拉菜单标题）。我怎么做？我尝试了以下脚本：

$('.navbar-collapse .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 1400) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});

 $( window ).on( "orientationchange", function( event ) {
  $('.navbar-collapse .dropdown-toggle').click(function() { $(this).removeClass('disabled'); });
});

我使用 bootstrap walker 类为 wordpress 开发此菜单。 请帮忙！该网站是：rafiki.ca

谢谢， nskp

Answer 1

您可以使用此代码

$('.navbar-collapse .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 1400) 
  { $(this).addClass('disabled');
  }
  else 
  {
    if($(this).hasClass('disabled'))
       $(this).removeClass('disabled');
    else
      $(this).addClass('disabled');
  }
});

 $( window ).on( "orientationchange", function( event ) {
  $('.navbar-collapse .dropdown-toggle').click(function() { $(this).removeClass('disabled'); });
});