bootstrap3：使用"更多选项"和"更少选项"按钮的本机隐藏/扩展菜单功能

Question

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

我设法使用 jQuery 脚本和 HTML 代码来做到这一点，我的问题是：是否有更原生的引导程序 3 来获得这些结果？ 我使用 data-toggle 的问题是我找不到使用 data-toggle="collapse" 来实现这一点的方法，而 bootstrap 3 提供了这种方式。

j查询：

$("#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 选择器