悬停下拉菜单无法使用 jquery

Hover dropdown menu not working using jquery

本文关键字：jquery 下拉菜单 悬停      更新时间：2023-09-26

这是我制作的下拉菜单，但它不起作用......目标元素一定不正确，但我无法弄清楚。.请帮忙

看这里 jsfiddle

您需要在下拉列表 ul（ 第二个 UL）上应用更改，而不是在li或其中的a上应用更改。

而不是ul li li a使用此CSS代码：

 ul  ul{
        display: none;
    }

和 JQ ：

jQuery(function($) {
    $('.myli').hover(function() {
    $(this).find('ul').slideToggle();
    });

});

你也可以只使用CSS来做到这一点。但是如果你想复制slideToggle转换，你应该知道 css 中的transition仅适用于"可计算"值 （0,1,100%） 等，所以它不适用于display或visibility所以为了做到这一点，你需要知道下拉菜单的固定高度并这样做

斯菲德尔

ul  ul{
   transition:0.5s;
   max-height: 0;
   overflow:hidden;
    }
 ul li.myli:hover > ul { 
   max-height: 300px;
 }

这里是解决方案...

你只能简单地用css...

.myli {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    max-width: 180px;
    z-index: 2;
    display: none;
}
.myli:hover .dropdown-menu {
    display: block;
}
<li class="myli"><a href="#">Home</a>
    <ul class="dropdown-menu">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
    </ul>
</li>

删除第 45 行的这一部分： 乌丽丽 一 { 显示：无; }

并添加以下内容：

    ul li ul {
        display: none;
    }
    ul li:hover ul {
        display: block;
    }
相关文章：