根据列表大小调整引导菜单多列的大小

Question

我有一个引导菜单列表，它会根据登录的用户动态更新。

在最小的列表中，它只有 15 项。在最大的列表中，它将是 26 项。列表项根据权限动态添加到视图中。

对此的当前引导解决方案是基于屏幕大小和列表中的静态项目数的多列布局。

是基于屏幕的大小。 https://jsfiddle.net/maciej_p/eatv1b4b/18/

基于静态数量的项目“这是我目前正在使用的” http://alijafarian.com/bootstrap-multi-column-dropdown-menu/

我需要一个基于动态列表创建的菜单列表，该列表根据菜单中的项目数量进行扩展或收缩。我可能会根据每个权限编写一个菜单，但我认为这会生成 3 倍的代码量。

我想的是下面的完整项目列表，但我根据列表计数添加了列。在加载之前，我不知道列表中的项目数量。所以当列表超过 20 项时，我无法打开和关闭列。

请帮忙？

<div class="row">
  <div class="col-xs-12">
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">click this<b class="caret"></b></a>
          <ul class="dropdown-menu columns">
            <li><a href="#"><strong>Górny Śląsk</strong></a></li>
            <li><a href="#">powiat będziński</a></li>
            <li><a href="#">powiat bielski</a></li>
            <li><a href="#">powiat bieruńsko-lędziński</a></li>
            <li><a href="#">powiat cieszyński</a></li>
            <li><a href="#">powiat częstochowski</a></li>
            <li><a href="#">powiat gliwicki</a></li>
            <li><a href="#">powiat kłobucki</a></li>
            <li><a href="#">powiat lubliniecki</a></li>
            <li><a href="#">powiat mikołowski</a></li>
            <li><a href="#">powiat myszkowski</a></li>
          </ul>
        </li>

      </ul>
    </nav>
  </div>
</div>

Answer 1

我认为你需要使用一些 jQuery。如果我理解正确，您希望列数基于 .dropdown-menu 内的 li 计数。

您需要在 dom 加载后检查您的 li 计数，并在此基础上检查您的员工。

$(document).ready(function() {
  var columnCount = $(".columns li").length;
  if (columnCount <= 10) {
    $(".columns").addClass("one-col");
  } else if (columnCount > 10 && columnCount <= 20) {
    $(".columns").addClass("two-col");
  } else if (columnCount > 20) {
    $(".columns").addClass("three-col");
  }
})

.columns.one-col {
  height: 200px;
  overflow-y: auto;
}
.columns.two-col {
  -moz-column-count: 2;
  /* Firefox */
  -webkit-column-count: 2;
  /* Safari and Chrome */
  column-count: 2;
  width: 500px;
  height: 170px;
}
.columns.three-col {
  -moz-column-count: 2;
  /* Firefox */
  -webkit-column-count: 2;
  /* Safari and Chrome */
  column-count: 2;
  width: 500px;
  height: 170px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-12">

    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">click this<b class="caret"></b></a>
          <ul class="dropdown-menu columns">
            <li><a href="#"><strong>Górny Śląsk</strong></a>
            </li>
            <li><a href="#">powiat będziński</a>
            </li>
            <li><a href="#">powiat bielski</a>
            </li>
            <li><a href="#">powiat bieruńsko-lędziński</a>
            </li>
            <li><a href="#">powiat cieszyński</a>
            </li>
            <li><a href="#">powiat częstochowski</a>
            </li>
            <li><a href="#">powiat gliwicki</a>
            </li>
            <li><a href="#">powiat kłobucki</a>
            </li>
            <li><a href="#">powiat lubliniecki</a>
            </li>
            <li><a href="#">powiat mikołowski</a>
            </li>
            <li><a href="#">powiat myszkowski</a>
            </li>
          </ul>
        </li>

      </ul>
    </nav>
    <br>
    <br>
    <span style="color:red">&laquo; click on the edge of frame and move it to the left to see how menu changes into two column</span>
  </div>
</div>

还有JsFiddle链接进行测试。