Question

我正在使用Bootstrap JS Collapse来显示类别中的所有内容。我创建了以列网格显示的面板，但只显示了第一个子菜单的内容。请帮我解决。

[更新]我更新了我的代码，但仍然不正确。

这是我的代码：

    <div class="panel-group category-products" id="accordian" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading "role="tab" id="heading0">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#menu0" aria-expanded="true" aria-controls="menu0">
                <span class='badge pull-right'><i class='fa fa-plus' ></i></span>                                    Tin tức công ty                                </a>
            </h4>
        </div>
        <div id="menu0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading0">
            <div class="panel-body">
                <ul>
                    <li>test</li>
                </ul>
            </div>
        </div>
        <div id="menu0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading0">
            <div class="panel-body">
                <ul>
                    <li>test2</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading "role="tab" id="heading1">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#menu1" aria-expanded="true" aria-controls="menu1">
                <span class='badge pull-right'><i class='fa fa-plus' ></i></span>                                    Thực phẩm                                </a>
            </h4>
        </div>
        <div id="menu1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
            <div class="panel-body">
                <ul>
                    <li>Thị trường trong nước</li>
                </ul>
            </div>
        </div>
        <div id="menu1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
            <div class="panel-body">
                <ul>
                    <li>Thị trường quốc tế</li>
                </ul>
            </div>
        </div>
        <div id="menu1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
            <div class="panel-body">
                <ul>
                    <li>Bánh Kẹo</li>
                </ul>
            </div>
        </div>
        <div id="menu1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
            <div class="panel-body">
                <ul>
                    <li>Đồ uống</li>
                </ul>
            </div>
        </div>
        <div id="menu1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
            <div class="panel-body">
                <ul>
                    <li>test3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- end.collapse -->

Here is result failed.

Answer 1

这可能对您有所帮助

<强> HTML

<div class="panel-group category-products" id="accordian" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading " role="tab" id="heading0">
      <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#menu0" aria-expanded="true" aria-controls="menu0">
                <span class='badge pull-right'><i class='fa fa-plus' ></i></span>                                    Tin tức công ty                                </a>
            </h4>
    </div>
    <div id="menu0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading0">
      <div class="panel-body">
        <ul>
          <li>test</li>
          <li>test2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading " role="tab" id="heading1">
      <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#menu1" aria-expanded="true" aria-controls="menu1">
                <span class='badge pull-right'><i class='fa fa-plus' ></i></span>                                    Thực phẩm                                </a>
            </h4>
    </div>
    <div id="menu1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
      <div class="panel-body">
        <ul>
          <li>Thị trường trong nước</li>
          <li>Thị trường quốc tế</li>
          <li>Bánh Kẹo</li>
          <li>test3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Fiddle Demo

无法使用Bootstrap JS Collapse显示所有内容

1 个答案: