На странице навигации с привязкой тега в выпадающем меню

Question

В настоящее время я создаю верхнюю панель навигации, которая показывает раскрывающийся список при наведении на некоторые элементы навигации. В настоящее время это выглядит так

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
  });
  
    const $dropdown = $(".dropdown");
    const $dropdownToggle = $(".dropdown-toggle");
    const $dropdownMenu = $(".dropdown-menu");
    const showClass = "show";
  
    $(window).on("load resize", function() {
      if (this.matchMedia("(min-width: 768px)").matches) {
        $dropdown.hover(
          function() {
            const $this = $(this);
            $this.addClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "true");
            $this.find($dropdownMenu).addClass(showClass);
          },
          function() {
            const $this = $(this);
            $this.removeClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "false");
            $this.find($dropdownMenu).removeClass(showClass);
          }
        );
      } else {
        $dropdown.off("mouseenter mouseleave");
      }
    });
  
  

.navbar{
  background-color: black;
  padding-left: 5vw;
  padding-right: 4vw;
}

.navbar .nav-item{
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.navbar .nav-item .nav-link{
  color: white;
  font-size: 18px;
  font-family: 'Roboto';
  font-weight: bold;
}

.navbar .nav-item .nav-link:hover{
  color: red;
  text-decoration: none;
}

.navbar .nav-item a:hover{
  color: #4c4c4c;
}

.navbar .nav-item:not(:last-child) {
  margin-right: 5px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear; 
   content: none;
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

.dropdown-menu {
  margin-top: 5px;
  border-top: 5px solid red;
  border-radius: 0;
  padding: 0;
}

.navbar .nav-item a{
  font-size: 18px;
  color: #080808;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 40px;
  font-weight: 400;
  font-family: 'Roboto';
  background-color: none;
  border-bottom: 1px solid rgba(193,193,193,0.59);
}

.navbar .nav-item .nav-link{
  border-bottom: none;
}

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
      <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 ml-auto">
                <li class="nav-item dropdown">

                    <a href="#information" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        About Us
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                        <a class="dropdown-item" href="#">Who we are</a>
                        <a class="dropdown-item" href="#">What we do</a>
                    </div>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Events</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Итак, я хочу сделать так, чтобы работал как раскрывающийся список при наведении, так и использовать одну и ту же кнопку раскрывающегося меню (nav-item), чтобы работать как кнопка, которая перемещает пользователя к указанному разделу.

В приведенном выше коде это будет «О нас», в котором при наведении указывается следующий выпадающий список. А если нажать «О нас», пользователь перейдет в указанный раздел («#information»).

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

Любая помощь будет принята с благодарностью

Спасибо.

Answer 1

У вас нет зависания на мобильных устройствах, поэтому щелчок не может открыть подменю и перейти к нужному разделу. Это не было бы идеально, поэтому Bootstrap работает следующим образом.

Одним из решений будет удаление data-toggle="dropdown" из тега <a>, однако раскрывающийся список не будет работать на мобильных устройствах, так как он требует событие щелчка.

Если вы хотите сохранить подменю для мобильной работы, лучше не иметь привязки навигации на мобильном телефоне. Итак, сохраните data-toggle="dropdown" и добавьте этот код:

$("#navbarDropdown1").click(function() {
  if ($(window).width() > 991) {
    var href = $(this).attr('href');
    $('body, html').animate({ // an animation if you prefer, slim jQuery doesn't include animate
      scrollTop: $(href).offset().top
    }, 600);
  }
});

Теперь при нажатии на «О нас» будет переходить к разделу, но только если ширина экрана меньше, чем Bootstrap точка останова зарезервирована для мобильных устройств (991px).