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'); });
});

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

1 个答案: