Question

我想要一个Bootstrap对齐按钮组，其中每个按钮在其下方打开折叠的<div>。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid bg-grey text-center" id="about">
    <div class="row">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button class="btn btn-info" id="about1-btn" data-toggle="collapse" data-target="#about1">Forms &amp Websites</button>
            </div>
            <div id="about1" class="collapse">
                <p>C# Windows Apps and Microsoft Azure Database Integration</p>
                <p>HTML5, CSS, JavaScript, jQuery, PHP, and MySQL</p>
            </div>

            <div class="btn-group">
                <button class="btn btn-info" id="about2-btn" data-toggle="collapse" data-target="#about2">Computer Architecture</button>
            </div>
            <div id="about2" class="collapse">
                <p>Combinational/Sequential Circuitry, Assembly Language</p>
                <p>Thread-Level Multiprocessing and Process Scheduling</p>
                <p>Networks and OS Integration</p>
            </div>

            <div class="btn-group">
                <button class="btn btn-info" id="about3-btn" data-toggle="collapse" data-target="#about3">Programming Concepts (C++)</button>
            </div>
            <div id="about3" class="collapse">
                <p>OOP, Inheritance &amp Polymorphism</p>
                <p>Memory Management, Advanced/Custom Data Structures</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

这会导致第一个按钮（左）奇怪地打开它的div，部分按钮消失，而其他两个按钮根本没有打开它们的内容。

我觉得我很接近但可能没有正确嵌套<div>。

Answer 1

我使用events使其一次只显示一个我认为这可能会给你一个更好的结果

我将元素移动到他们自己的行，以便在您添加更多按钮和更灵敏的设备尺寸时使其更具可扩展性

＆＃13;

$(document).ready(function() {
  $('#sub').on('show.bs.collapse', function() {
    $('#sub .collapse').collapse('hide')
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid bg-grey text-center">
  <div class="row">
    <div class="btn-group btn-group-justified" id="myCollapsible">
      <div class="btn-group">
        <button class="btn btn-info" id="about1-btn" data-toggle="collapse" data-parent="#sub" data-target="#about1">Forms &amp Websites</button>
      </div>

      <div class="btn-group">
        <button class="btn btn-info" id="about2-btn" data-toggle="collapse" data-parent="#sub" data-target="#about2">Computer Architecture</button>
      </div>

      <div class="btn-group">
        <button class="btn btn-info" id="about3-btn" data-toggle="collapse" data-parent="#sub" data-target="#about3">Programming Concepts (C++)</button>
      </div>
    </div>
  </div>

  <div class="row" id="sub">
    <div id="about1" class="collapse">
      <p>C# Windows Apps and Microsoft Azure Database Integration</p>
      <p>HTML5, CSS, JavaScript, jQuery, PHP, and MySQL</p>
    </div>

    <div id="about2" class="collapse">
      <p>Combinational/Sequential Circuitry, Assembly Language</p>
      <p>Thread-Level Multiprocessing and Process Scheduling</p>
      <p>Networks and OS Integration</p>
    </div>

    <div id="about3" class="collapse">
      <p>OOP, Inheritance &amp Polymorphism</p>
      <p>Memory Management, Advanced/Custom Data Structures</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我认为嵌套是错误的。尝试使用'btn-group'类将div中的'about'id放入div中。

        <div class="btn-group">
            <button class="btn btn-info" id="about1-btn" data-toggle="collapse" data-target="#about1">Forms &amp Websites</button>
        <div id="about1" class="collapse">
            <p>C# Windows Apps and Microsoft Azure Database Integration</p>
            <p>HTML5, CSS, JavaScript, jQuery, PHP, and MySQL</p>
        </div>
        </div>

另外，如前所述，您缺少引号。

Bootstrap Justified Collapse Button Group

2 个答案: