Question

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

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

目前的自助解决方案是基于屏幕大小和列表中静态项目数的多列布局。

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

基于静态数量的物品＆＃34;这是我目前正在使用的物品＆＃34; 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。如果我理解正确，您希望根据li内的.dropdown-menu计数列数。

您需要在dom加载后检查li计数，并根据您的工作人员进行检查。

＆＃13;

$(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");
  }
})

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

JsFiddle链接进行测试。

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

1 个答案: