JavaScript for Bootstrap下拉菜单有时起作用，有时不起作用

JavaScript for Bootstrap dropdown sometimes works, sometimes doesn't

本文关键字：不起作用 起作用 for 下拉菜单 JavaScript Bootstrap      更新时间：2023-09-26

我使用Bootstrap下拉菜单，如下所示:

%ul.hidden-xs.hidden-sm
  %li= link_to "LIBRARY", library_path
  %li= link_to "PRICING", plans_and_pricing_path
  %li.dropdown
    .dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown"}= link_to "#{current_user.first_name} <i class='fa fa-caret-down'></i>".html_safe, '#'
    %ul.dropdown-menu
      %li= link_to 'Edit profile', edit_user_registration_path(resource), class: 'user-nav-li'
      %li= link_to 'Referrals', referrals_path, class: 'user-nav-li'
  %li= link_to "LOG OUT", destroy_user_session_path, method: :delete

有时有效，有时无效。当点击下拉菜单时，我试着查看检查器中的元素(在它不起作用的时候)，我可以看到事件触发。%li.dropdown应该加入open类，aria-expanded应该从true变为false。这就是它工作时发生的事情。然而，当它不起作用时，元素保持不变，只是在检查器(Chrome)中简单地突出显示，就像元素被改变时一样。

这告诉我JS正在加载，因为它至少响应点击事件。但是没有别的事情发生。

我试着寻找模式。刷新有时会修复它，但有时会触发问题。有时导航到另一个页面会修复它，但有时不会。没有一个页面的行为是一致的。我想这应该无关紧要，因为它在我的导航栏里，在应用程序层面。

我不知道还能尝试什么。一切似乎都是随机的。

旁注:我不是JavaScript专业人士

正如我所说的，罪魁祸首是turbolinks。添加gem jquery-turbolinks应该可以解决这个问题。

#Gemfile
gem 'jquery-turbolinks'

并运行bundle install

相关文章：