Javascript 如何在悬停模式下显示子菜单

我有一个带有子菜单（垂直）的菜单。我的第一个

li

通过子菜单处于活动状态。 我的问题是，当我将鼠标悬停在另一个

li

中时，我在上一个菜单中添加了子菜单

我需要的是：

• 当我将鼠标悬停在菜单中时，仅获取当前li的子菜单
• 当我的光标未悬停在我的菜单中时，要获取类上有

  的默认子菜单

这是JSFIDLE的链接

这是我的代码：

<nav>
                <div id="menuu">
                    <ul class="niveau1">
                        <li><a id="lrf"  class="sousmenu" href="#">Test 1</a>
                            <ul id="lrfH" class="niveau2 on">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>

                            </ul>
                        </li>
                       <li><a id="cm" class="sousmenu" href="#">Test 2</a>
                            <ul id="cmH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>
                        <li><a id="dj" class="sousmenu" href="#">Test 3</a>
                            <ul id="djH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>  

JS代码

$(document).ready(function(e){
                    $('.sousmenu').hover(function(e){
                        e.preventDefault();
                        var getID=$(this).attr('id');
                        $("#"+getID+"H").css("visibility","visible");
                        $(".on").css("visibility","hidden");
                    });

                });

试试这个：

$（文档）.ready（函数（e）{
$（'.sousmenu'）。悬停（函数（e）{
e、 预防默认值（）；
var getID=$（this.attr（'id'）；
$（“.niveau2”）.hide（）；
$（“#”+getID+“H”）.show（）；
});
});
#menuu ul{
保证金：0；
填充：0；
左侧填充：97px；
线高：30px；
}
#李美努{
浮动：左；
列表样式：外部无；
}
苏斯穆努先生{
颜色：#000！重要；
文字装饰：无；
宽度：150px；
高度：30px；
显示：块；
文本对齐：居中；
边框：1px实心#000；
}
.niveau2{
左边距：-50px！重要；
}
.niveau2 a{
左侧填充：20px！重要；
文字装饰：无；
颜色：红色；
}
.sousmenu:悬停{
颜色：#fff！重要；
背景色：#ddd；
边框底色：#000！重要；
}
#梅努乌尔{
位置：绝对位置；
可见性：隐藏；
左侧填充：0px；
}
#梅努·乌利：盘旋在a上{
颜色：#000；
}
#梅努乌尔{
左：152px；
顶部：-0.5px；
显示：无；
}
#梅努乌尔利：悬停{
能见度：可见；
}
.niveau2.on{
可见性：可见！重要；
}





















试试这个：


$（文档）.ready（函数（e）{
$（'.sousmenu'）。悬停（函数（e）{
e、 预防默认值（）；
var getID=$（this.attr（'id'）；
$（“.niveau2”）.hide（）；
$（“#”+getID+“H”）.show（）；
});
});
#menuu ul{
保证金：0；
填充：0；
左侧填充：97px；
线高：30px；
}
#李美努{
浮动：左；
列表样式：外部无；
}
苏斯穆努先生{
颜色：#000！重要；
文字装饰：无；
宽度：150px；
高度：30px；
显示：块；
文本对齐：居中；
边框：1px实心#000；
}
.niveau2{
左边距：-50px！重要；
}
.niveau2 a{
左侧填充：20px！重要；
文字装饰：无；
颜色：红色；
}
.sousmenu:悬停{
颜色：#fff！重要；
背景色：#ddd；
边框底色：#000！重要；
}
#梅努乌尔{
位置：绝对位置；
可见性：隐藏；
左侧填充：0px；
}
#梅努·乌利：盘旋在a上{
颜色：#000；
}
#梅努乌尔{
左：152px；
顶部：-0.5px；
显示：无；
}
#梅努乌尔利：悬停{
能见度：可见；
}
.niveau2.on{
可见性：可见！重要；
}





















如果您真的想依赖hover，您可以不用JavaScript，只需使用CSS即可。看见（小提琴的问题是您使子菜单可见，但在mouseleave上不再不可见。）但是，不建议仅使用悬停，因为它在无法检测悬停的设备上不起作用。尝试此操作，希望这能解决您的问题。但是我需要激活第一个li，我可以第一次看到子菜单，如果我将第二个li悬停在第一个li上，如果你真的想依赖悬停，你可以不用JavaScript，只需使用CSS。看见（小提琴的问题是您使子菜单可见，但在mouseleave上不再不可见。）但是，不建议仅使用悬停，因为它在无法检测悬停的设备上不起作用。尝试此操作，希望这能解决您的问题。但是我需要第一个li处于活动状态，并且我可以第一次看到子菜单，如果我将第二个li悬停在第一个li上，请感谢回复，但我认为当我将鼠标悬停在第二个
li
上时，他们有问题，这很好，但是当我的光标离开菜单时，我没有处于活动状态的默认菜单，默认菜单包含一个
打开类
感谢您的回复，但我认为当我在第二个
li
中悬停时，他们有问题，它工作得很好，但是当我的光标不在菜单中时，我没有默认菜单，因为默认菜单处于活动状态，默认菜单包含类
$(document).ready(function(e){
                    $('.sousmenu').hover(function(e){
                        e.preventDefault();
                        var getID=$(this).attr('id');
                        $("#"+getID+"H").css("visibility","visible");
                        $(".on").css("visibility","hidden");
                    });

                });