Question

我有3个不同的标签（只更改帖子的顺序），每个标签都有一个折叠按钮列表，但是，它们只能在第一个标签中工作，而在其他标签上按钮不是＆＃t; t＆＃34;开＆＃34 ;.我该如何解决这个问题？

这是我的折叠按钮：

<button type="button" class="btn btn-default stat-item" data-toggle="collapse" data-parent="#accordion" href="<%= " #collapse_#{improvement_action.id}" %>
    ">
    <span class="glyphicon glyphicon-pencil"></span> Comments (<%= improvement_action.comments.count %>)
</button>

<div id='<%= "collapse_#{improvement_action.id}" %>' class="panel-collapse collapse">
    <div class="panel-body">

        <div class="post-footer">

            COLLAPSED TEXT

        </div>
    </div>
</div>

以下是我的标签：

<div id="tabs-container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-1">Active</a></li>
        <li><a href="#tab-2">Oldest</a></li>
        <li><a href="#tab-3">Votes</a></li>
    </ul>
</div>
<div class="tab">
    <div id="tab-1" class="tab-content">
        TAB 1

    </div>
    <div id="tab-2" class="tab-content">
        TAB 2
    </div>
    <div id="tab-3" class="tab-content">
        TAB 3
    </div>
</div>

标签的Javascript：

$(document).ready(function() {
    $(".nav-tabs a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

以下是发生的事情的示例（但在我的情况下，按钮必须相同，因此我无法创建具有不同ID的两个不同按钮）：

http://jsfiddle.net/xuh9xt7o/

编辑：

来源示例：

 <!-- TAB HERE -->

    <div id="tabs-container" >
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-1">Recent</a></li>
        <li><a href="#tab-2">Votes</a></li>
        <li><a href="#tab-3">Oldest</a></li>
      </ul>
    </div>
    <div class="tab">
      <div id="tab-1" class="tab-content">
        <p> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <div class="row">



      <div class="panel panel-white post panel">
        <div class="post-heading">
          <div class="pull-left image">
            <img src="http://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
          </div>
          <div class="pull-left meta">
            <div class="title h5">
              <b> joao@mail.com </b>
            </div>
            <h6 class="text-muted time"> about 6 hours </h6>    </h6>
          </div>

        </div>
        <div class="post-description">
          <p>  agree!!</p>
          <div class="stats">

               <!-- unsign_in user! -->
                    <a class="btn btn-default stat-item" rel="nofollow" data-method="put" href="/improvement_actions/32/like">
                        <span class="fa fa-thumbs-up icon" aria-hidden="true"></span>
                        <span > 2</span>
    </a>                <a class="btn btn-default stat-item" rel="nofollow" data-method="put" href="/improvement_actions/32/like">
                        <span class="fa fa-thumbs-up icon" aria-hidden="true"></span>
                        <span > 2</span>
    </a>


    <!-- COLLAPSE BUTTON HERE!! -->

                <button type="button" class="btn btn-default stat-item" data-toggle="collapse" data-parent="#accordion" href="#collapse_32">
                  <span class="glyphicon glyphicon-pencil"></span> Comments (0)
                </button>

            <div id='collapse_32' class="panel-collapse collapse">
                  <div class="panel-body">

                    <div class="post-footer">



                      <link rel="stylesheet" media="screen" href="/assets/comments.self-b85a9aba9d1b331db3d95dbde7deb0beb400c786249465d5ad4824c6b77d0240.css?body=1" />


        <form class="new_comment" id="new_comment" action="/improvement_actions/32/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="9ugV0/I9M1tC2lDJEiNnaVGBFK0flYQ9VuLbfmBJfacQ0eunlp+uItmzIwAskRgVOlgytFNvxIeLnoPnyobqng==" />



            <div class="input-group">
              <input placeholder="Add a comment" class="form-control" type="text" name="comment[body]" id="comment_body" />
              <div class="input-group-addon">
        <button name="button" type="submit" class="btn btn-default1">
                    <i class="fa fa-edit"></i>
    </button>  </div>
            </div>


    </form>




                      <br>
                      <h4>0 Comments  </h4>





                    </div>
                  </div>
                </div>








                </div>



                </div>



                </div>

      <hr>

                </div>

Answer 1

您有两个具有相同ID版本的div。当您单击第二个按钮时，它会影响它在DOM中遇到的第一个按钮（位于第一个选项卡中）

编辑（更多信息）：将数据目标更改为类似demo2，将可折叠内容从demo更改为demo2，它将起作用

Answer 2

id必须是唯一的，如果您更改标签2中折叠id的{{1}}，它应该有效：

div

http://jsfiddle.net/xuh9xt7o/2/更新了js

折叠按钮不能在不同的标签中工作

2 个答案: