Question

我有一个元素，当另一个元素悬停在其上时需要slideDown，并且当它悬停在自身上时仍然可见。由于涉及具有大量重叠元素的设计和大量使用z-index的问题，我无法将滑动元素嵌套在悬停的元素上;他们甚至不能成为兄弟姐妹。

HTML：

<div class="a">
    <div class="b">
        <div class="c">
            <nav class="navvy">
                <ul>
                    <li class="active">
                        <a href="#" class="one">One</a>
                    </li>
                    <li>
                        <a href="#" class="two">Two</a>
                    </li>
                </ul>
            </nav><!--nav-1-->
        </div><!--c-->
    </div><!--b-->
</div><!--a-->
<div class="slidedown slidedown-one">
    <div class="slide-content">
        One - text.
    </div><!--slide-content-->
</div><!--slidedown-->
<div class="slidedown slidedown-two">
    <div class="slide-content">
        Two - text.
    </div><!--slide-content-->
</div><!--slidedown-->

jQuery（注意：我正在使用hoverIntent插件）：

//Hide all slidedown divs
$('.slidedown').hide();

//Find the active class
var activeCl = $('.navvy').children('ul').find('.active').children('a').attr('class').split(' ')[0];

//Slide it down
var downSlide = function() {
    activeCl = $(this).attr('class').split(' ')[0];
    $('.slidedown-'+activeCl).slideDown(1000);
};

//Slide it up
var upSlide = function() {
    activeCl = $(this).attr('class').split(' ')[0];
    $('.slidedown-'+activeCl).delay(1000).slideUp(1000);
};

//Slide on hover
var slideHover = function() {
    $('.navvy').children('ul').find('li').children('a').hoverIntent({
        over: downSlide,
        out: upSlide
    });
};
slideHover();

它向上和向下滑动很好，但是当鼠标在滑动的div内部时，我需要它不再向上滑动。

编辑：这是一个带有代码的JSFiddle：http://jsfiddle.net/qeLVU/2/

Answer 1

您的代码看起来像是在思考这一点。当您将鼠标悬停在nav链接上时，只需向下或向上滑动，与div本身相同。

$('.nav-1 ul li a').hover(function () {
    $('.slidedown-' + this.className).stop().slideDown();
}, function (){
    $('.slidedown-' + this.className).stop().slideUp();
});

$('.slidedown').hover(function () {
    $(this).stop().slideDown();
}, function (){
    $(this).stop().slideUp();
});

http://jsfiddle.net/cJWn8/

Answer 2

使用hoverIntent

在hoverIntent上，它不知道它也应该对内容起作用，你需要让它知道你想要什么。 $('.navvy').children('ul').find('li').children('a').hoverIntent需要更像$('.navvy li').hoverIntent，其中幻灯片内容位于li内，因此它们都会触发悬停事件。

所以html更像是：

<nav class="navvy">
    <ul>
        <li>
            <a href="#">Home</a>
            <div>One - text.</div>
        </li>
        <li>
            <a href="#">About</a>
            <div>Two - text.</div>
        </li>
    </ul>
</nav>

然后jquery变得更容易，你可以做类似的事情：

$('.navvy li').hoverIntent({//on common parent
    over: function() {
        $(this).addClass('active')//add active
        .children('div').stop(true,true).slideDown('slow');//slide down
    },
    out: function() {
        $(this).removeClass('active')//remove active
        .children('div').stop(true).slideUp('fast');//slide up
    }
});

做了一个小提琴：http://jsfiddle.net/filever10/TCY78/

没有意图的jquery或更改html

如果您无法更改此实例中的html，或者不想重新排列它，那么此类内容将适用于现有html。

$('.navvy a').each(function(i) {//i gives you the index of the element
    var cl = $(this),//current link
        cc = $('.slidedown').eq(i),//current content
        dl = 0,//initial delay
        spd = 500,//speed
        tim = 250;//timeout
    cl.add(cc).hover(function() {//hover on
        !$('.slidedown:visible').length?dl=0:dl=spd;//set delay
        clearTimeout(cl.data('timer'));//clear timer
        cl.parent('li').addClass('active');//active on 
        cc.stop(true,true).delay(dl).slideDown(spd);//slide down
    }, function() {//hover off
        cl.parent('li').removeClass('active');//active off
        var timer = setTimeout(function() {//timeout
            cc.stop(true).slideUp(spd);//slide up
        }, tim);//delay
        cl.data('timer', timer);//set timer
    });
});

做了一个小提琴：http://jsfiddle.net/filever10/xn85z/

悬停时不要隐藏元素

2 个答案: