Rails中的Turbolink出现问题：可折叠的菜单和发送复选框的形式

编程问答 2022-06-11

问题描述

我对使用Rails进行开发还很陌生（说实话，通常来说，开发），所以我希望有人可以提供有关如何解决此问题的线索...

我正在使用WrapBootstrap中的Inspinia模板创建Rails网络应用（红宝石2.6.5，rails 6.0.1）。

该模板的导航侧栏具有预配置的行为（下拉/可折叠的第二级菜单项等）。一切正常。

但是，我需要创建一个视图页面来控制佣金，因此为了标记已付佣金，我创建了一个带有单个复选框的simple_form表单，该复选框将切换“已付”与“未付”属性。

发生的事情是，当我单击复选框时，即使我有turbolinks宝石，也收到未找到Turbolinks的错误消息。

所以我在application.js中加入了//= require turbolinks

但是，当我这样做时，导航侧栏中具有子级别的可折叠菜单项只是保持打开状态，不再折叠。

我不确定该怎么做，因为我需要为自己的表单正常工作而需要turbolinks，但我也希望折叠边栏菜单。

screenshot of the issue

HTML菜单项的示例（当在浏览器中检查HTML且侧栏正常运行时，有一个名为“ aria-expanded”的类不会在我的常规HTML上显示）：

<li class="border-top <%= 'active' if current_page?('/operations') || current_page?('/operations/new') || current_page?('/vencimento') %>">
   <a href="#"><i class="fa fa-cogs"></i><span class="nav-label" data-i18n="nav.menulevels"> Operations </span><span class="fa arrow"></span></a>
      <ul class="nav nav-second-level">
         <li> <%= link_to "Operations List",operations_path %> </li>
         <li> <%= link_to "New Operation",new_operation_path %> </li>
         <li> <%= link_to "Due Options",vencimento_path %> </li>
      </ul>
 </li>

表单代码（附加字段只是为了使它唯一，以避免与其他更新混淆）：

<%= simple_form_for(operation,remote: true) do |f|%>
   <%= f.check_box :status,label: false,onchange: 'Rails.fire(this.form,"submit")',id: "checkbox-#{operation.id}",value: true,input_html: {  checked_value: true,unchecked_value: false },checked: operation.status == 'Terminada' ? 'checked' : '' %>
   <%= f.simple_fields_for :toggle_com do |d| %>
      <%= d.input :commission,as: :hidden,input_html: { value: 'toggle' } %>
   <% end %>
<% end %>

application.js中的代码：

//= require rails-ujs
//= require activestorage
//= require jquery/jquery-3.1.1.min.js
//= require popper
//= require bootstrap
//= require pace/pace.min.js
//= require slimscroll/jquery.slimscroll.min.js
//= require metisMenu/jquery.metisMenu.js
//= require inspinia.js
//= require dataTables/datatables.min.js
//= require dataTables/dataTables.bootstrap4.min.js
//= require datapicker/bootstrap-datepicker.js
//= require chartkick
//= require Chart.bundle

CSS：

.nav > li > a {
  color: $nav-text-color;
  font-weight: 600;
  padding: 14px 20px 14px 25px;
  display: block;
}

.nav.metismenu > li {
  display: block;
  width: 100%;
  position: relative;
}

.nav.metismenu .dropdown-menu > li > a {
  padding: 3px 20px;
  display: block;
}

.nav.navbar-right > li > a {
  color: #999c9e;
}

.nav > li.active > a {
  color: #ffffff;
}

.navbar-default .nav > li > a:hover,.navbar-default .nav > li > a:focus {
  background-color: darken($nav-bg,3%);
  color: white;
}

.nav .open > a,.nav .open > a:hover,.nav .open > a:focus {
  background: #fff;
}

.nav.navbar-top-links > li > a:hover,.nav.navbar-top-links > li > a:focus {
  background-color: transparent;
}

.nav > li > a i {
  margin-right: 6px;
}
ul.nav-second-level {
  background: darken($nav-bg,3%);
}

.nav > li.active {
  border-left: 4px solid darken($navy,2%);
  background: darken($nav-bg,3%);
}

.nav.nav-second-level > li.active {
  border: none;
}

.nav.nav-second-level.collapse[style] {
  height: auto !important;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlruby-on-railssimple-formturbolinks