在下拉菜单上使用锚标记进行页面导航

Posted 2023-02-24

【中文标题】在下拉菜单上使用锚标记进行页面导航

【英文标题】：On page navigation with anchor tag on dropdown menu

【发布时间】：2020-05-31 21:51:08

【问题描述】：

我目前正在构建一个顶部导航栏，它会在悬停在某些导航项上时显示下拉菜单。 目前看起来是这样的

$(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>

所以我想做的是让悬停下拉菜单和使用下拉菜单相同的按钮（导航项）作为将用户导航到指定部分的按钮。

在上面的代码中，“关于我们”将在悬停时显示其以下下拉菜单。当点击“关于我们”时，它会将用户导航到指定的部分（“#information”）。

我只能让其中一个工作。如果我在悬停时获得下拉菜单，则导航不起作用，如果我获得导航工作，则下拉菜单不会出现在悬停时。

任何帮助将不胜感激

谢谢。

【问题讨论】：

请编辑您的帖子以包含任何相关的 CSS 和 javascript。 How to Ask

【参考方案1】：

您没有将鼠标悬停在移动设备上，因此点击无法打开子菜单和导航到所需部分。这并不理想，所以 Bootstrap 就是这样工作的。

一种解决方案是从<a> 标记中删除data-toggle="dropdown"，但是下拉菜单在移动设备中不起作用，因为它需要点击事件。

如果您想维护移动工作的子菜单，最好不要在移动设备上进行锚导航。所以，保留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)，则不会。