如何修复展开(向下)但不折叠(向上)的导航栏?

时间:2019-06-13 17:55:39

标签: javascript ruby-on-rails bootstrap-4

我有一个导航栏,当导航栏低于某个屏幕尺寸时,该导航栏具有汉堡包切换功能。我的问题是导航栏下降了(正确展开),但又没有上升(崩溃)。

我尝试检查其他论坛以及关于同一问题的相同问题,但没有任何帮助。我肯定需要一些刷新,因为我已经有一段时间没有编写JS了。

<nav class="navbar navbar-expand-md navbar-light white-background">
  <%= link_to root_path, class: "navbar-wagon-brand" do %>
    <%= image_tag "logo.jpg" %>
  <% end %>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse " id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#motto"><%= t('about_title') %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#services"><%= t('solution_title') %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#why"><%= t('benefits_title') %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#team"><%= t('team_title') %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#partners"><%= t('clients_title') %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact_us"><%= t('contact_us') %></a>
      </li>
    </ul>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="https://www.enso-value.com/?locale=en"><%= image_tag("english_flag.png", class: "fit-image-flag") %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.enso-value.com/?locale=nl"><%= image_tag("netherlands_flag.png", class: "fit-image-flag") %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.enso-value.com/?locale=fr"><%= image_tag("french_flag.png", class: "fit-image-flag") %></a>
      </li>
    </ul>
  </div>
</nav>

我希望导航栏能够正常工作。

2 个答案:

答案 0 :(得分:0)

尝试一下。有效

elem.filter(":checked").val()

答案 1 :(得分:0)

通过在我的application.html.erb文件中注释以下代码行使它起​​作用:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

感谢您的帮助!

我如何工作?我开始评论所有内容,以了解它对我的导航栏和网站产生了哪些影响,我发现这是使它无法正常工作的原因。