Как исправить панель навигации, которая расширяется (опускается), но не сворачивается (поднимается назад)? - PullRequest
Новая
       0

Как исправить панель навигации, которая расширяется (опускается), но не сворачивается (поднимается назад)?

0 голосов
/ 13 июня 2019

У меня есть навигационная панель, которая имеет переключатель гамбургера при переходе ниже определенного размера экрана. Моя проблема в том, что навигационная панель опускается (расширяется правильно), но не поднимается снова (сворачивается).

Я пытался проверить другие форумы и те же вопросы на ту же проблему, но ничего не помогло. Я определенно нуждаюсь в некотором освежении, поскольку я некоторое время не кодировал 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 голосов
/ 14 июня 2019

Я заставил это работать, комментируя в моем файле 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>

Спасибо всем за помощь!

Как я работал? Я начал комментировать все строки, чтобы увидеть, какое влияние это оказало на мою навигационную панель и мой веб-сайт, и обнаружил, что именно она заставляет его работать неправильно.

0 голосов
/ 13 июня 2019

Попробуй это. Работает 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...