Question

在我的rails应用程序中，我有一个页面，根据下拉选项，最多可以呈现3个不同的部分。每个部分都包含相同的bootstrap手风琴，更改了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

Answer 1

好吧我觉得我发现了问题。它与相同的部分被渲染3次并在加载页面时隐藏的事实有关。因此，当我尝试在第二列上打开/关闭手风琴时，它可能会对第一列产生反应。

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

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

1 个答案: