0

I have a menu button, and if you click it, a menu drops down. Then, if you click anywhere on the HTML except for the menu or the button, the menu disappears. I achieved this by using jquery stopPropogation to prevent the $("html").click event from being triggered if the menu or button are clicked.

However, I added a link to my menu that uses method: :delete, and since jquery is disabled within the menu, the method: :delete is ignored as well, and the link sends a GET request.

Is it possible to achieve a menu that closes if you click anywhere but inside the menu or the menu button, but also have a method: :delete link?

<div id="menu-button">BUTTON</div>
<div id="menu">
  <%= link_to "LOG OUT", logout_path, method: :delete %>
</div>

<script type="text/javascript">
  $("#menu-button").click(function() {
    $("#menu").toggle();
  });
  $("html").click(function() {
    $("#menu").hide();
  });
  $("#menu, #menu-button").click(function(event) {
    event.stopPropagation();
  });
</script>

Fiddle

Joe Morano
  • 1,715
  • 10
  • 50
  • 114
  • Where exactly are you planning to include this delete link? Is it within the menu or as separate element in the page? Could you just clarify on this or just update the fiddle with the delete link. – Hrishikesh Dec 04 '17 at 05:36
  • @Beginner I wasn't sure how to add the link, because it's an in-app path, but I added a basic link to the fiddle that demonstrates what I'm trying to to. – Joe Morano Dec 04 '17 at 05:54

0 Answers0