Question

我很难让我的下拉菜单正常运行。我直接从Twitter Bootstrap指南（v3）中删除了下拉模板，并根据我的目的进行了调整。该应用程序是在Sinatra中构建的，下拉列表的代码位于我的布局视图中。该菜单可以在与布局位于同一级别的任何视图中正常工作，但是当点击位于子目录中的任何视图的下拉列表时，单击它只会将#附加到URL的末尾，菜单会不要下降。

＆＃13;

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

＆＃13;

非常感谢任何帮助！

Answer 1

如果您正在寻找的话，请使用jQuery进行多级下拉。

将您的下拉数据替换为此内容。

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

Bootstrap下拉列表在某些视图中不起作用

1 个答案: