javascript - Bootstrap 3动态显示文字

Question

我正在与 Bootstrap 的 collapse 作斗争我元素中的类，试图将键(按钮)与另一个中的文本绑定(bind) div这样我就可以折叠并正确显示它。

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

引导代码:

    <!-- 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 时按钮文本将无法正确显示。

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

也许一个恰当的问题是，是否可以仅使用最少的 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>

希望对您有所帮助。