jquery - jQuery Drop Down Hover on Div（不仅仅是链接）

Question

当您尝试转到 div 时，我试图让此滑块悬停，并且我将使用它作为下拉菜单。

http://jsfiddle.net/ANFRD/263/

  <a href="#" id="toggleLink">Click Here</a>
  <div class="toggledDiv">This is the content of the toggled div</div>
  <div class="alwaysVisible">This is the content of the always visible div</div>

和 JS

var toggleState = true;
$('#toggleLink').hover(function () {
if (toggleState) {
    $('.toggledDiv').stop().animate({
        height: 80
    }, 500);
} else {
    $('.toggledDiv').stop().animate({
        height: 0
    }, 500);
}
toggleState = !toggleState;
return false;
});

Answer 1

我通过使用mouseoverona.toggleLink来显示 div 来实现这一点。然后我隐藏mouseleave了toggleWrapperdiv。如果您不想使用包装 div（当您将鼠标悬停在上方时，它可以防止它向上滑动，a.toggleLink您可以更改$('.toggleWrapper')为$('.toggledDiv')

工作小提琴

旁注，请注意我删除了 ID 并改用类。我建议更改样式并使用类。

<div class='toggleWrapper'>
    <a href="#" class="toggleLink">Click Here</a>
    <div class="toggledDiv">This is the content of the toggled div</div>
</div>
<div class="alwaysVisible">This is the content of the always visible div</div>

然后将样式更改为：

.toggleLink{
  display:block;
  width:100%
}

JavaScript

$('a.toggleLink').mouseover(
    function () {
        $('.toggledDiv').animate({height: 80}, 500);
    }
);                 

$('.toggleWrapper').mouseleave(
    function(){
        $('.toggledDiv').stop().animate({height: 0}, 500);
    }
);