Rails 5：单击时隐藏导航下拉菜单答案

【问题标题】：Rails 5: hide navigation drop-down on clickRails 5：单击时隐藏导航下拉菜单
【发布时间】：2017-03-05 10:53:51
【问题描述】：

在 /views/layouts/_navigation.html.erb 我有这段代码，点击时会填充下拉菜单：

<div class="dropdown profile-element">
  <span>
    <img alt="image" class="img-circle" src="<%= image_url 'profile_small.jpg' %>"/>
  </span>
     <a data-toggle="dropdown" class="dropdown-toggle" href="#">
       <span class="clear">
         <span class="block m-t-xs">
         <strong class="font-bold"><%= current_user.name %></strong><b class="caret"></b>
         </span>
       </span>
     </a>
     <ul class="dropdown-menu animated fadeInRight m-t-xs">
       <li><%= link_to t('.settings'), edit_user_path(current_user), remote: true %></li>
       <li class="divider"></li>
       <li><%= link_to t('.logout'), logout_path %></li>
     </ul>
</div>

link_to t('.settings') 填充显示用户设置的 AJAX 模式窗口。在 /javascripts/layouts/navigation.coffee 我有这段代码：

$(document).click (event) ->
  clickover = $(event.target)
  $navbar = $('.dropdown profile-element')
  _opened = $navbar.hasClass('in')
  if _opened == true and !clickover.hasClass('dropdown-toggle')
    $navbar.collapse 'hide'
  return

单击link_to t('.settings') 时应该关闭下拉菜单，但它不起作用。

点击settings时如何关闭下拉菜单？感谢您的帮助。

解决方案更新

如果有人需要这里是最终解决方案，这在我的情况下似乎是最简单的。我将$("#dialog").trigger('click'); 添加到我的users/edit.js.erb 中，这使得填充模式时背景中的下拉菜单消失。

【问题讨论】：

你做了什么调试？如果您记录变量，您可以确认它们是否设置为您期望的值，例如你确定 event.target 是你所期望的吗？ _opened 是否设置为真值，clickover 有哪些类？
@margo 我现在还没有进行任何调试。到目前为止，我尝试实现answer from here，这似乎是我的情况。我想我在上面的 JS 代码中没有正确理解。
我建议您在代码中添加一些日志记录，并在控制台中检查您的变量是否符合您的预期，例如console.log($(event.target))

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

您的导航栏选择器错误。应该是：

$navbar = $('.dropdown.profile-element')

或者换句话说，您忘记了“。”在“配置文件元素”之前。

【讨论】：

谢谢，它有效。我还找到了另一种方法 - 我必须将 $('#profile_dropdown').hide(); 添加到我的 views/users/edit.js.erb 并将 id='profile_dropdown 添加到 _navigation.html.erb