CODEWITHSUNDEEP
htmltwitter-bootstrap-3sinatraerb
C. Boujoukos
C. Boujoukos

Reputation: 11

Bootstrap dropdown not working in some views

I am struggling to get my dropdown menu to function properly. I pulled the template for the dropdown straight from the Twitter Bootstrap guide(v3) and tweaked it for my purposes. The app is built in Sinatra, and the code for the dropdown resides in my layout view. The menu works properly from any views the are on the same level as layout, but when clicking on the dropdown from any view located in a subdirectory, clicking it just appends a # to the end of the URL and the menu does not drop down. 

<li class="dropdown">
    <a data-target="#" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"  aria-haspopup="true" aria-expanded="false">Campaigns  <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <% current_user.campaigns.each do |campaign| %>
        <li><a href="/campaigns/<%= campaign.slug %>"><%= campaign.name %></a></li>
        <% end %>
        <li role="separator" class="divider"></li>
        <li><a href="/campaigns/new">New Campaign</a></li>
      </ul>
    </li>

Any help is greatly appreciated!

Upvotes: 1

Views: 895

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

Use jQuery for multi level dropdown, if that's what you are looking for.

Substitute your dropdown data into this.

$(document).ready(function() {
  $('.dropdown-submenu a.test').on("click", function(e) {
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">MENU
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">List 1</a></li>
      <li><a tabindex="-1" href="#">List 2</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Upvotes: 0

Related Questions