如何使用jQuery创建下拉导航？

i5desfxk 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(99)

我试着创建一个下拉列表，当你悬停在链接上时可以看到。
我想创建一个导航菜单，当鼠标悬停在链接上时，使用jQuery删除链接。
我创建了一个函数，当你将鼠标悬停在**'link 3'**上时，下拉列表会下降（使用 mouseenter 和 mouseleave）。但是当你把鼠标移到下拉链接上时，它应该保持不变，但是它会上升。
当你将鼠标悬停在下拉菜单上时，是否可以强制链接3处于悬停状态？

$(document).ready(function(){
 $("div#header ul li a#link-three").on('mouseenter', function(){
  $("div#header-dropdown-content").slideDown(500);
 });
 
 $("div#header ul li a#link-three").on('mouseleave', function(){
  $("div#header-dropdown-content").slideUp(500);
 });
 
 $("div#header-dropdown-content a").on('mouseenter', function(){
  $("div#header-dropdown-content").slideDown(500);
  $("a#link-three").trigger('hover');
 });
 
 $("div#header-dropdown-content a").on('mouseleave', function(){
  $("div#header-dropdown-content").slideUp(500);
 });
});

div#header {
 z-index: 1;
 position: sticky;
 top: 0;
}
div#header ul {
 list-style-type: none;
 user-select: none;
 font-size: 1.15em;
 margin: -8px;
 padding: 0;
 height: 43px;
 overflow: hidden;
 backdrop-filter: blur(3px);
 background: none;
 background-color: rgba(23 23 23 / 75%);
 box-shadow: 0 5px 10px 0 rgba(0 0 0 / 60%);
}
div#header ul li {
 float: left;
}
div#header ul li a {
 display: block;
 cursor: pointer;
 color: white;
 text-align: center;
 padding: 6px 16px;
 border: 4px solid transparent;
 text-decoration: none;
 transition: .5s border-bottom, .3s background;
}
div#header ul li a:hover {
 background: #222;
 border-bottom: 4px solid #f00;
}

div#header-dropdown-content {
 display: none;
 position: absolute;
 left: 114.5px;
 top: 43px;
 font-size: 17px;
 box-shadow: 0px 4px 9px #aaa;
 background: #f1f1f1;
 width: 157.5px;
}
div#header-dropdown-content a {
 color: black;
 text-decoration: none;
 display: flex;
 padding: 15px 10px;
}
div#header-dropdown-content a:hover {background: #ddd;}

<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="header">
 <ul>
  <li><a href="javascript:void(0);" id="link-one">Link 1</a></li>
  <li><a href="javascript:void(0);" id="link-two">Link 2</a></li>
  <li><a href="javascript:void(0);" id="link-three">Link 3</a></li>
 </ul>
</div>

<div id="header-dropdown-content">
 <a href="javascript:void(0);">Dropdown 1</a>
 <a href="javascript:void(0);">Dropdown 2</a>
 <a href="javascript:void(0);">Dropdown 3</a>
 <a href="javascript:void(0);">Dropdown 4</a>
</div>

</body>

jquery

来源：https://stackoverflow.com/questions/76646155/how-to-create-dropdown-navigation-using-jquery

1条答案

按热度按时间

3j86kqsm1#

您可以考虑使用一些状态变量来检查下拉列表或链接是否处于悬停状态。如果其中一个是true，则显示;如果两者都是false，则隐藏。
由于链接的hitbox和下拉列表之间有一个微小的间隙，在检查下拉列表是否应该隐藏之前有一个延迟。这为用户提供了将鼠标移动到下拉列表的时间。

$(document).ready(function(){
  let linkHovered = false;
  let dropdownHovered = false;
  let timeout;
  
  const check = () => {
    clearTimeout(timeout);

    if (linkHovered || dropdownHovered) {
      $("div#header-dropdown-content").slideDown(500);
    }
    else {
      timeout = setTimeout(() => {
        if (!linkHovered && !dropdownHovered) {
          $("div#header-dropdown-content").slideUp(500);
        }
      }, 200);
    }
  };

 $("div#header ul li a#link-three").on('mouseenter', function(){
   linkHovered = true;
   check();
 });
 
 $("div#header ul li a#link-three").on('mouseleave', function(event) {
   linkHovered = false;
   check();
 });
 
 $("div#header-dropdown-content a").on('mouseenter', function(){
   dropdownHovered = true;
   check();
 });
 
 $("div#header-dropdown-content a").on('mouseleave', function(){
   dropdownHovered = false;
   check();
 });
});

div#header {
 z-index: 1;
 position: sticky;
 top: 0;
}
div#header ul {
 list-style-type: none;
 user-select: none;
 font-size: 1.15em;
 margin: -8px;
 padding: 0;
 height: 43px;
 overflow: hidden;
 backdrop-filter: blur(3px);
 background: none;
 background-color: rgba(23 23 23 / 75%);
 box-shadow: 0 5px 10px 0 rgba(0 0 0 / 60%);
}
div#header ul li {
 float: left;
}
div#header ul li a {
 display: block;
 cursor: pointer;
 color: white;
 text-align: center;
 padding: 6px 16px;
 border: 4px solid transparent;
 text-decoration: none;
 transition: .5s border-bottom, .3s background;
}
div#header ul li a:hover {
 background: #222;
 border-bottom: 4px solid #f00;
}

div#header-dropdown-content {
 display: none;
 position: absolute;
 left: 114.5px;
 top: 43px;
 font-size: 17px;
 box-shadow: 0px 4px 9px #aaa;
 background: #f1f1f1;
 width: 157.5px;
}
div#header-dropdown-content a {
 color: black;
 text-decoration: none;
 display: flex;
 padding: 15px 10px;
}
div#header-dropdown-content a:hover {background: #ddd;}

<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="header">
 <ul>
  <li><a href="javascript:void(0);" id="link-one">Link 1</a></li>
  <li><a href="javascript:void(0);" id="link-two">Link 2</a></li>
  <li><a href="javascript:void(0);" id="link-three">Link 3</a></li>
 </ul>
</div>

<div id="header-dropdown-content">
 <a href="javascript:void(0);">Dropdown 1</a>
 <a href="javascript:void(0);">Dropdown 2</a>
 <a href="javascript:void(0);">Dropdown 3</a>
 <a href="javascript:void(0);">Dropdown 4</a>
</div>

</body>

赞(0）回复(0）举报 2023-08-04

我来回答

如何使用jQuery创建下拉导航？

1条答案

相关问题

热门标签

最新问答