选择侧边栏后未显示下拉列表

时间：2017-05-24 17:02:31

标签： jquery html ruby-on-rails

在我的rails 5.1.1 app中，我有3个（现在）相同的页面，containing each 3 dropdown menus用于根据所选选项呈现特定的部分。 （使用jquery change（））。这一切都很好，但问题是，如果我使用侧边栏从一个页面转到oder，the dropdown menu is not shown，我必须手动刷新页面才能显示。如果我通过输入URL进入页面，则所有内容都应该显示。知道为什么吗？

这是＆＃34; / policy＆＃34;带有下拉列表的页面（代码可能有点乱，因为我刚开始使用网页开发）：

<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:"fbpartial" %>
      </div>

      <div id="twitter2" class="group2" >
        <%= render partial:"twpartial" %>
      </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:"fbpartial" %>
      </div>

      <div id="twitter3" class="group3" >
        <%= render partial:"twpartial" %>
      </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
        //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
        //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
        //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>

以下是包含侧边栏的布局的相关部分（＆＃34;公共＆＃34;，＆＃34;政策＆＃34;和＆＃34; privacy_setting＆＃34;页面目前是相同的：< / p> 

[<div id="wrapper" class="toggled" style="background-color: whitesmoke; ">

  <!-- Sidebar -->
  <div id="sidebar-wrapper" style="width: 22rem; overflow-x: hidden;">
    <div class="profile-sidebar">
      <!-- SIDEBAR USERPIC -->
      <div class="profile-userpic">
        <img src="http://lorempixel.com/400/400/people/1" class="img-responsive" alt="">
      </div>
      <!-- END SIDEBAR USERPIC -->
      <!-- SIDEBAR USER TITLE -->
      <div class="profile-usertitle">
        <div class="profile-usertitle-name">
          Sandra Monty
        </div>
        <div class="profile-usertitle-job">
          Welcome
        </div>
      </div>
      <!-- END SIDEBAR USER TITLE -->
      <!-- SIDEBAR BUTTONS -->
      <div class="profile-userbuttons">

      </div>
      <!-- END SIDEBAR BUTTONS -->
      <!-- SIDEBAR MENU -->
      <div class="profile-usermenu">
        <ul class="nav">
          <li class="<%= 'active' if params\[:controller\] == 'privacy_setting' %>">
            <a href="privacy_setting">
              <i class="fa fa-cogs" aria-hidden="true"></i>
              Privacy Settings </a>
          </li>
          <li class="<%= 'active' if params\[:controller\] == 'policy' %>">
            <a href="policy">
              <i class="fa fa-user-secret" aria-hidden="true"></i>
              Privacy Policy </a>
          </li>
          <li class="<%= 'active' if params\[:controller\] == 'public' %>">
            <a href="public">
              <i class="fa fa-globe" aria-hidden="true"></i>
              Public information </a>
          </li>

          <li class="<%= 'active' if params\[:controller\] == 'about' %>">
            <a href="about">
              <i class="fa fa-info-circle" aria-hidden="true"></i>
              About  </a>
          </li>
        </ul>
      </div>
      <!-- END MENU -->
      <div class=" row bottom-buttons">
        <div class="col-md-4">
        <a data-toggle="tooltip" data-placement="top" title="Settings">
          <i class="fa fa-cog" aria-hidden="true"></i>
        </a>
        </div>
        <div class="col-md-4">
        <a data-toggle="tooltip" data-placement="top" title="FullScreen">
          <i class="fa fa-arrows-alt" aria-hidden="true"></i>
        </a>
        </div>
          <div class="col-md-4">
        <a data-toggle="tooltip" data-placement="top" title="Logout">
          <i class="fa fa-sign-out" aria-hidden="true"></i>
        </a>
        </div>
      </div>
      <div class="force-to-bottom">
        <h5> Privacy Dashboard Prototype</h5>
      </div>
    </div>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper" style="background-color: whitesmoke">

          <%= yield %>

  </div>
  <!-- /#page-content-wrapper -->]

1 个答案:

答案 0 :(得分：0)

您的问题可能是由默认情况下由Rails加载的Turbolinks引起的。它通过使用AJAX加速渲染页面，但除非您刷新页面，否则它可能会因为不执行它而弄乱您的JavaScript。使用事件监听器包装每个JavaScript函数以进行turbolinks加载，这可能会解决您的问题。

$(document).on('turbolinks:load', function() {
  ...your jQuery/javascript goes here...
});
相关问题
最新问题