Bootstrap 3动态显示文本

Question

我在我的项目中正在努力使用Bootstrap的collapse类，尝试将键（按钮）与另一个div中的文本绑定，这样我就可以折叠并正确显示它。

我知道如何在一个简单的折叠示例中执行此操作，但正如您将看到我需要为每个title和subcategory按钮显示不同的文本。

Bootstrap代码：

    <!-- In this section evert btn class need to toggle/display text in the Subcategory section, Question is how to do that. -->
    <div class="col-md-2 col-md-push-1 lists">
      <div class="inner-div">
   <table class="table table-striped">
      <thead>
    <tr>
      <th>Logo</th>
            </tr>
          </thead>
     <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
      <td><a class="btn btn-md" role="button" data-toggle="collapse" href="#collapseExample" id="row2" data-target=".row2" aria-expanded="false" aria-controls="collapseExample"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
      <td><a class="btn btn-md" role="button" data-toggle-to="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
      </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
      </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
   </table>
      </div>
   </div>

   <!-- This section need's to toggle and display different text-->
    <div class="col-md-6 col-md-push-2 podnaslov">
      <div class="subcategories">
        <h1 class="text-center">Display Subcategories</h1>
      </div>
      <hr>
      <div class="panel inner-div-3 collapse" id="collapseExample">

        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum consequuntur architecto quis, itaque cupiditate, atque aliquam. Qui delectus corporis quidem nisi molestiae ullam, ipsam sapiente corrupti, asperiores. Nobis, sed!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quasi unde et reprehenderit, qui, deserunt veritatis architecto pariatur, molestiae commodi consectetur deleniti consequatur laudantium dolore rem vitae nesciunt sed temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sequi et sint impedit laboriosam. Tenetur quidem perspiciatis repellat numquam vero similique, dolorum alias, distinctio dignissimos tempora, et, dicta quia laborum.</p>

      </div>

      <div class="panel inner-div-3 collapse row2" id="collapseExample1">

        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum consequuntur architecto quis, itaque cupiditate, atque aliquam. Qui delectus corporis quidem nisi molestiae ullam, ipsam sapiente corrupti, asperiores. Nobis, sed!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quasi unde et reprehenderit, qui, deserunt veritatis architecto pariatur, molestiae commodi consectetur deleniti consequatur laudantium dolore rem vitae nesciunt sed temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sequi et sint impedit laboriosam. Tenetur quidem perspiciatis repellat numquam vero similique, dolorum alias, distinctio dignissimos tempora, et, dicta quia laborum.</p>

      </div>
    </div>

这是我的Bootply示例。这是更新的白色工作示例。

正如您在单击subcategory 1按钮时看到的那样，文本将折叠并正常显示，但是当您单击subcategory 2按钮时，文本将无法正常显示。

如何仅使用Bootstrap折叠类绑定按钮以显示需要隐藏在<div class="subcategory">内的文本。

也许一个恰当的问题是，是否可以用最少的Bootstrap JavaScript做到这一点，以及如何做到这一点？

Answer 1

正如您所看到的，您的第一个链接（子类别1）正在运行，但第二个链接（子类别2）却没有。这是因为在您的第二个链接中，您使用的是data-toggle-to而不是data-toggle。 在Bootstrap中，崩溃插件使用data-toggle，因此您必须使用data-toggle。

所以用以下代码替换你的代码：

<a class="btn btn-md" role="button" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a>

有关详细信息，请参阅： http://getbootstrap.com/javascript/#collapse 。我认为它可以帮助您了解Bootstrap崩溃的基础知识。

如果你问是否可以使用Bootstrap制作崩溃效果，那么答案当然是你可以做到的！您只需向特定元素添加id和.collapse，并将data-toggle="collapse" data-target="#yourElementID"添加到您的链接（或您使用的任何内容）。

这是一个基本的例子：

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

希望有所帮助。