0

我在 jquery 中滑动有一个小问题。在悬停（鼠标悬停）时，我需要我的导航列表项通过向下滑动来显示其内容，在鼠标移出时它应该向上滑动。

HTML：

<ul class="nav nav-tabs nav-stacked">
     <li  id = "mousehover">
       <a style="background-color:#f78144; color: #000; text-align:  center;" href="#">Time Table
      </a>
    </li>
</ul>

<div id = "hovercontent">
     Contents 1 
</div>

Javascript：

<script type="text/javascript">
$(document).ready(function(){

    $("#mousehover").mouseenter(function(){
        $("#hovercontent").slideDown("slow");
    });

    $("#hovercontent").mouseleave(function(){
        $(this).slideUp("slow");
    });

 });
</script>

这里的问题是，当我将鼠标悬停在列表上时，div 会向下滑动，但只有在我将鼠标悬停在 div 上并离开导航后，div 才会向上滑动。即使我将鼠标移出列表而没有进入 div，我也需要 div 向上滑动。如何才能做到这一点？

4

6 回答 6

0

我建议使用一个类：

HTML：

<ul class="nav nav-tabs nav-stacked">
    <li  id = "mousehover" class="menu1">
       <a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
    </li>
</ul>
<div id = "hovercontent" class="menu1">
    Contents 1 
</div>

JS：

<script>
$(document).ready(function(){
    $("#mousehover").mouseenter(function(){
        $("#hovercontent").slideDown("slow");
    });

    $(".menu1").mouseout(function(){
        $("#hovercontent").slideUp("slow");
    });
});​
</script>
于 2012-12-28T06:03:05.833 回答
0

查看http://www.quirksmode.org/js/events_mouse.html。在您的事件处理程序中，按照那里的描述检查相关的目标。在事件处理程序中使用 console.log 来跟踪正在发生的事情。不幸的是，如果没有您使用的类的 CSS，我将无能为力……也许您可以在http://jsbin.com/上的 JSBin 中提供一个测试用例？

于 2012-12-28T06:04:19.610 回答
0

尝试这个

$(document).ready(function(){
   $("#mousehover").mouseover(function(){
      $("#hovercontent").slideDown("slow");
   });
   $("#hovercontent ,#mousehover").mouseleave(function(){
       $('#hovercontent').slideUp("slow");
   });

});
于 2012-12-28T06:05:59.477 回答
0

更好用mouseover，mouseout会为你做的..

$("#hovercontent").bind("mouseout", function() {
     $(this).slideUp("slow");
});
于 2012-12-28T05:57:00.787 回答
0

试试这个并以doc ready这种方式放置：http: //jsfiddle.net/ptVbs/

$("#mousehover").hover(function() {
    $("#hovercontent").slideDown("slow");
}, function() {
    if (!$("#hovercontent").hover()) {
        $("#hovercontent").slideUp("slow");
    }
});
$("#hovercontent").mouseleave(function() {
    $(this).slideUp("slow");
});

你可以试试小提琴。

于 2012-12-28T06:01:05.337 回答
0

尝试event.type在'hover' 您的#mousehover内容上附加一个“悬停”事件处理程序，然后event.type查看正在发生的事件类型。通过事件'hover'，您将获得mouseenter和mouseleave

$(document).ready(function(){
    ​$('#mousehover').on('hover',function(event){
        switch(event.type){
            case 'mouseenter': $("#hovercontent").slideDown("slow");
                break;
            case 'mouseleave': $("#hovercontent").slideUp("slow");
                break;
        }
    });​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
});
于 2012-12-28T06:05:40.797 回答