Question

我使用bootstrap 3，我创建了一个包含更多选项的菜单，单击它时会显示更多以Less Options按钮结尾的按钮，并隐藏更多选项，与Less Options相反。

我设法使用jQuery脚本和HTML代码，我的问题是：是否有更多的本机bootstrap 3来获得这些结果？我使用数据切换的问题是我找不到使用data-toggle =“collapse”bootstrap 3提供的实现方法。

jQuery的：

$("#moreOptionsButton").click(function(){
$("#moreOptionsButton").hide(); 
   $("#extraMenu").show();
});

$("#lessOptionsButton").click(function(){
$("#moreOptionsButton").show();
    $("#extraMenu").hide();
});

和HTML代码：

    <div class="menuButton" id="moreOptionsButton">
      <div class="row">
          <button class="col-xs-offset-1 col-xs-10 btn btn-lg">
            <span><i class="glyphicon glyphicon-chevron-down"></i>&nbsp;&nbsp;More Options</span>
          </button>
      </div>
    </div>

    <div id="extraMenu" class="collapse">
      <div class="menuButton">
        <div class="row">
          <div class="col-xs-offset-1 col-xs-10 btn btn-lg">
            <span><i class="glyphicon glyphicon-star"></i>&nbsp;&nbsp;Location</span>
          </div>
        </div>
      </div>

      <div class="menuButton">
        <div class="row">
          <div class="col-xs-offset-1 col-xs-10 btn btn-lg">
            <span class=""><i class="glyphicon glyphicon-star"></i>&nbsp;&nbsp;Contact</span>
          </div>
        </div>
      </div>

      <div class="menuButton" id="lessOptionsButton">
        <div class="row">
          <button class="col-xs-offset-1 col-xs-10 btn btn-lg">
            <span class=""><i class="glyphicon glyphicon-chevron-up"></i>&nbsp;&nbsp;Less Options</span>
          </button>
        </div>
      </div>

Answer 1

您可以在按钮中添加data-toggle="collapse" data-target="#extraMenu"来执行相同操作：

<div class="menuButton" id="moreOptionsButton">
  <div class="row">
      <button data-toggle="collapse" data-target="#extraMenu" class="col-xs-offset-1 col-xs-10 btn btn-lg">
        <span><i class="glyphicon glyphicon-chevron-down"></i>&nbsp;&nbsp;More Options</span>
      </button>
  </div>
</div>

<div id="extraMenu" class="collapse">
  <div class="menuButton">
    <div class="row">
      <div class="col-xs-offset-1 col-xs-10 btn btn-lg">
        <span><i class="glyphicon glyphicon-star"></i>&nbsp;&nbsp;Location</span>
      </div>
    </div>
  </div>

  <div class="menuButton">
    <div class="row">
      <div class="col-xs-offset-1 col-xs-10 btn btn-lg">
        <span class=""><i class="glyphicon glyphicon-star"></i>&nbsp;&nbsp;Contact</span>
      </div>
    </div>
  </div>

  <div class="menuButton" data-toggle="collapse" data-target="#extraMenu" id="lessOptionsButton">
    <div class="row">
      <button class="col-xs-offset-1 col-xs-10 btn btn-lg">
        <span class=""><i class="glyphicon glyphicon-chevron-up"></i>&nbsp;&nbsp;Less Options</span>
      </button>
    </div>
  </div>

来自http://getbootstrap.com/javascript/#collapse：

只需将data-toggle =“collapse”和数据目标添加到元素即可自动分配对可折叠元素的控制。数据目标属性接受CSS选择器以应用折叠。务必将类折叠添加到可折叠元素。如果你愿意的话默认打开，添加其他类。

在您的情况下，#extraMenu是您的CSS选择器

bootstrap3：使用更多选项＆amp ;;本机隐藏/扩展菜单功能。少选项按钮

1 个答案: