Question

我的代码在这里：http://jsfiddle.net/vFJvL/ 当您将鼠标悬停在子菜单3上时，产品列表会下拉，但是，当您将鼠标悬停在每个产品上时，它会再次隐藏它们。我尝试将.hvr类添加到li元素中：http://jsfiddle.net/vFJvL/2/它不起作用

我希望每个产品都能显示，只要您将鼠标悬停在外部..

由于

修改我们还可以在短时间内（例如1秒）将鼠标切换多次，以阻止它多次切换。我想我们需要在其他地方使用stop（）

Answer 1

这是一个工作小提琴：http://jsfiddle.net/maniator/vFJvL/5/

$(document).ready(function(){
    //Hide the tooglebox when page load
    $(".sub").hide(); 
    //slide up and down when hover over heading 2
    $(".hvr").hover(function(){
        // slide toggle effect set to slow you can set it to fast too.
        $(".sub", this).slideToggle(); 
               //<-- get the element with class `sub` inside this li and show it
        return true;
    });
});

Answer 2

next()方法可以解决您的问题。尝试使用find()

JSFiddle演示：http://jsfiddle.net/Jaybles/vFJvL/6/

<强> HTML

<li class="hvr"><a href="#"> Submenu3 </a>

<强> JS

$(document).ready(function(){
    $(".sub").hide(); 
    $(".hvr").hover(function(){
        $(this).find(".sub").slideToggle();
        return true;
    });
});

jQuery .hover效果不适用于“li”但适用于“a”

2 个答案: