Question

您好朋友我在jQuery中使用mouseeneter(）和mouseout()设计了一个下拉菜单。问题是当我从主菜单中mouseout()时，下拉链接会向上滑动。我不知道如何设置条件请帮忙。我的代码是

Jquery的

<script>
$(document).ready(function(){
    //alert('hi');
    $('#link-detail').css('display','none');
    $('#hover-detail').mouseenter(function(){
        $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
        $('#link-detail').slideDown();
        });
        $('#hover-detail').mouseout(function(){
        $('#link-detail').slideUp();
        });

    })
</script>

HTML

<div class="link-detail-wrap"><div id="hover-detail">hover me</div>
<div>
  <ul id="link-detail">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
  </ul>
</div></div>
<div>hihihih</div>

CSS

.link-detail-wrap
{
    float:left;
    width:100%;
    position:relative;
    }

ul#link-detail 
{
    margin:0;
    padding:0;
    border:solid 1px #666;
    border-bottom:none;

    }
ul#link-detail  li
{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;

    }
ul#link-detail  li a
{
    text-decoration:none;
    color:#333;
    padding:2px 50px 2px 10px;
    background:#F0F0F0;
    border-bottom:1px solid #666;
    /*line-height:25px;*/
    font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:capitalize;
    display:block;
    }
ul#link-detail  li a:hover
{
    background:#CCC;
    }

您也可以在http://jsfiddle.net/36CXK/

上看到它

请帮助

提前致谢

Answer 1

在脚本区域中使用此脚本

<script type="text/javascript">
$(document).ready(function(){
        //alert('hi');
        $('#link-detail').css('display','none');


            $("#hover-detail").hover(
  function () {
    $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
            $('#link-detail').slideDown();
  }, 
  function () {
    // do nothing
  }
);

$(".relation").hover(
  function () {
   // do nothing
  }, 
  function () {
    $('#link-detail').slideUp();
  }
);
 })
</script>

并在额外的css类

上创建

.relation {
    position:relative;
    top:-20px;
}

Answer 2

一种方法是使用具有一定延迟的超时在鼠标离开时向上滑动菜单。每次悬停菜单时都可以清除此超时，从而阻止动画发生。

我创建了一个对象Dropdown来控制超时：

var Dropdown = {
    timer: 0,
    hide: function(callback, delay){
        this.timer = setTimeout(function() {
            return callback.call(this, arguments);
        }, delay);
    },
    reset: function(){
        this.timer && clearTimeout(this.timer);
    }
};

您可以重构代码以使用它：

$('#link-detail').css('display', 'none');

$('#hover-detail').hover(function() {
    Dropdown.reset();
    $('#link-detail').css({
        position: 'absolute',
        top: '20px',
        left: '0px',
        zindex: '99999'
    });
    $('#link-detail').slideDown();
}, function() {
    Dropdown.hide(function(){
        $('#link-detail').slideUp();
    }, 200);
});

$('#link-detail').hover(function() {
    Dropdown.reset();
}, function(){
    Dropdown.hide(function(){
        $('#link-detail').slideUp();
    }, 200);
});

这是a working fiddle。

Answer 3

只需注释掉$('#link-detail').slideUp();行。

见这里：

http://jsfiddle.net/36CXK/1/

Answer 4

为什么不使用已经可用的jQuery下拉列表插件之一：

它们很容易设计，所有功能都已实现。您需要做的就是根据您的喜好设置下拉样式。

jquery中的下拉菜单

4 个答案: