CODEWITHSUNDEEP
javascriptjqueryhtmlcssruby-on-rails
matiss
matiss

Reputation: 747

Rails 5: hide navigation drop-down on click

In /views/layouts/_navigation.html.erb I have this piece of code where drop-down menu is populated on click:

<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') populate AJAX modal window where user settings are shown. In /javascripts/layouts/navigation.coffee I have this piece of code:

$(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

which should close drop-down menu when link_to t('.settings') is clicked, however it is not working.

How to make drop-down close when settings is clicked? Thank you for any help.

Update on solution

If anyone needs here is final solution, which appeared to be the simplest in my case. I added $("#dialog").trigger('click'); to my users/edit.js.erb which made drop-down in background disappear when modal was populated.

Upvotes: 0

Views: 714

Answers (1)

M. Stavnycha
M. Stavnycha

Reputation: 433

You have wrong selector of navbar. It should be rather:

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

or in other words you forgot "." before "profile-element".

Upvotes: 1

Related Questions