如果从部分渲染，同一页面上的引导手风琴不起作用答案

【问题标题】：Bootstrap accordions on the same page not working if rendered from partial如果从部分渲染，同一页面上的引导手风琴不起作用
【发布时间】：2017-06-04 10:23:54
【问题描述】：

在我的 rails 应用程序中，我有一个页面，根据下拉选择最多可以呈现 3 个不同的部分。每个部分都包含相同的引导手风琴，并更改了 id 和 data-parent 以区分它们。问题是，如果我将它们都放在同一页面上，它们会按应有的方式工作see the code here，但如果它们位于不同的部分中，呈现在同一页面上，第二个不起作用，我不知道为什么？

这里是渲染部分的 index.html.erb：

<div class="container-fluid" style="height: 90rem;" >
  <div class="row"><h1 class="page-header" style="color: #777777">Privacy settings<small> <br>Here is a list of the available privacy settings on different social networks. Click on a setting to see its details </small></h1><br>


  </div>

  <div class="row" style="padding-bottom: 3rem;text-align: center"> <!-- selection row -->

    <div class="col-md-3 col-md-offset-1 dropsel"> <!-- first column -->

      <select id="selectMe2" class="selectpicker" data-width="fit" title="Choose social network" >
        <option>None</option>
        <option value="facebook2">Facebook</option>
        <option value="twitter2">Twitter</option>
        <option value="linkedin2">LinkedIn</option>
        <option value="google2">Google +</option>
        <option value="pinterest2">Pinterest</option>
      </select>
    </div>

      <div class="col-md-3 dropsel" > <!-- second column -->

        <select id="selectMe3" class="selectpicker" data-width="fit" title="Choose social network">
          <option>None</option>
          <option value="facebook3">Facebook</option>
          <option value="twitter3">Twitter</option>
          <option value="linkedin3">LinkedIn</option>
          <option value="google3">Google +</option>
          <option value="pinterest3">Pinterest</option>
        </select>

      </div>

        <div class="col-md-3 dropsel" > <!-- third column -->

          <select id="selectMe4" class="selectpicker" data-width="fit" title="Choose social network">
            <option>None</option>
            <option value="facebook4">Facebook</option>
            <option value="twitter4">Twitter</option>
            <option value="linkedin4">LinkedIn</option>
            <option value="google4">Google +</option>
            <option value="pinterest4">Pinterest</option>
          </select>

        </div>
  </div>


<div class="row"> <!-- content row  -->
  <div class="col-md-3 col-md-offset-1 dropcont"> <!-- first content column -->


      <div id="facebook2" class="group2" >
        <%= render partial:"fbpartial2" %>
      </div>

      <div id="twitter2" class="group2" >
        <%= render partial:"twpartial2" %>
      </div>

      <div id="linkedin2" class="group2" >
        <%= render partial:"lkpartial" %>
      </div>

      <div id="google2" class="group2" >
        <%= render partial:"googlepartial" %>
      </div>

      <div id="pinterest2" class="group2" >
        <%= render partial:"pinpartial" %>
      </div>
    </div><!-- /first column -->


  <div class="col-md-3 dropcont"> <!-- second content column -->

      <div id="facebook3" class="group3" >
        <%= render partial:"fbpartial2" %>
      </div>

      <div id="twitter3" class="group3" >
        <%= render partial:"twpartial2" %>
      </div>

      <div id="linkedin3" class="group3" >
        <%= render partial:"lkpartial" %>
      </div>

      <div id="google3" class="group3" >
        <%= render partial:"googlepartial" %>
      </div>

      <div id="pinterest3" class="group3" >
        <%= render partial:"pinpartial" %>
      </div>
    </div><!-- /second column -->

  <div class="col-md-3 dropcont"> <!-- third content column -->

      <div id="facebook4" class="group4" >
        <%= render partial:"fbpartial" %>
      </div>

      <div id="twitter4" class="group4" >
        <%= render partial:"twpartial" %>
      </div>

      <div id="linkedin4" class="group4" >
        <%= render partial:"lkpartial" %>
      </div>

      <div id="google4" class="group4" >
        <%= render partial:"googlepartial" %>
      </div>

      <div id="pinterest4" class="group4" >
        <%= render partial:"pinpartial" %>
      </div>
    </div><!-- /third column -->



  </div>
</div>

<!-- scripts -->

<script>
    $(document).ready(function () {
        $('.group2').hide();//hide
        $('#none').show();//set default class to be shown here, or remove to hide all
                $('#selectMe2').change(function () {//on change do stuff
            $('.group2').hide();//hide all with .group2 class
            $('#'+$(this).val()).show(); //show selected option's respective element
        })
    });</script>

<script>
    $(document).ready(function () {
        $('.group3').hide();//hide
        $('#none').show();//set default class to be shown here, or remove to hide all
        $('#selectMe3').change(function () {//on change do stuff
            $('.group3').hide();//hide all with .group2 class
            $('#'+$(this).val()).show(); //show selected option's respective element
        })
    });</script>

<script>
    $(document).ready(function () {
        $('.group4').hide();//hide
        $('#none').show();//set default class to be shown here, or remove to hide all
        $('#selectMe4').change(function () {//on change do stuff
            $('.group4').hide();//hide all with .group2 class
            $('#'+$(this).val()).show(); //show selected option's respective element
        })
    });</script>

第一部分（_fbpartial2）：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12" style="text-align: center; overflow-x: hidden;">

      <div class="row" style="padding-bottom: 4rem;">
        <i class="fa fa-exclamation-circle fa-4x" aria-hidden="true"></i> <br>
        <p> Warning, your profile is only 20% private!</p>
      </div>

      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <i class="fa fa-plus-square-o pull-right" aria-hidden="true"></i>
                Public Information
              </a>
            </h4>
          </div>

          <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body" style="text-align: center;">
              panel content

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


        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                <i class="fa fa-plus-square-o pull-right" aria-hidden="true"></i>
                Public Photos
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              panel content

            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                <i class="fa fa-plus-square-o pull-right" aria-hidden="true"></i>
                Public Posts
              </a>
            </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

和第二个（_twpartial2，与第一个相同，在我之前说的更改参数之外）：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12" style="text-align: center; overflow-x: hidden;">

      <div class="row" style="padding-bottom: 4rem;">
        <i class="fa fa-exclamation-circle fa-4x" aria-hidden="true"></i> <br>
        <p> Warning, your profile is only 20% private!</p>
      </div>

      <div class="panel-group" id="accordion2">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2">
                <i class="fa fa-plus-square-o pull-right" aria-hidden="true"></i>
                Public Information
              </a>
            </h4>
          </div>

          <div id="collapseOne2" class="panel-collapse collapse in">
            <div class="panel-body" style="text-align: center;">

             panel content


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


        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2">
                <i class="fa fa-plus-square-o pull-right" aria-hidden="true"></i>
                Public Photos
              </a>
            </h4>
          </div>
          <div id="collapseTwo2" class="panel-collapse collapse">
            <div class="panel-body">

panel content

            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree2">
                <i class="fa fa-plus-square-o pull-right" aria-hidden="true"></i>
                Public Posts
              </a>
            </h4>
          </div>
          <div id="collapseThree2" class="panel-collapse collapse">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

您可以在 bootply 示例中看到手风琴的 javascript

【问题讨论】：

您是否尝试过将实际呈现的 HTML 与 bootply 中的内容进行比较？
是的，我试过了，HTML 似乎是一样的
我真的不明白为什么它不起作用
问题一定出在索引页面的某个地方，因为如果我删除所有内容并只渲染 2 个部分，它可以正常工作。 @SergGr

标签： jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

好的，我想我找到了问题所在。这与加载页面时相同的部分被渲染 3 次并隐藏的事实有关。因此，当我尝试打开/关闭第二列上的手风琴时，它可能会对第一列做出反应。

我通过创建每个部分的 2 个副本并以不同的方式命名它们来解决它，以便每一列加载不同的部分。我确信有一个更优雅的解决方案，但作为一个初学者我很高兴它可以工作:)

【讨论】：