Question

我有一个带有nav-divs类的div，它有另一个div嵌套在类下拉列表中。我有四个。当其中一个nav-div悬停在上面时，我希望直接在nav-div下面的下拉div向下滑动。我如何确保只有nav-div下方的下拉div在jQuery下滑？

HTML -

<div id='container'>
    <div class='nav-divs'>Home 
        <div class='drop-down'></div>
    </div>
    <div class='nav-divs'>Products
        <div class='drop-down'></div>
    </div>
    <div class='nav-divs'>About 
        <div class='drop-down'></div>
    </div>
    <div class='nav-divs'>Contact 
        <div class='drop-down'></div>
    </div>
</div>

CSS -

#container {
    text-align: center;
    height: 30px;
    width: 100%;
    background-color: #e74c3c;
}

.nav-divs {
    background-color: #c0392b;
    height: 30px;
    width: 100px;
    display: inline-block;
    margin-left: 50px;
    line-height: 30px;
    font-family: Franklin Gothic Medium Cond;
}

.drop-down {
    height: 200px;
    width: 100px;
    background-color: #bdc3c7;
    display: none;
}

jQuery -

$('.nav-divs').mouseover(function(){
    $('.drop-down').slideDown(500);
});

$('.nav-divs').mouseout(function(){
    $('.drop-down').slideUp(300);
});

帮助将不胜感激，因为我对jQuery很新。

谢谢！

Answer 1

将你的jquery改为：

$('.nav-divs').mouseover(function(){
$(this).find('.drop-down').slideDown(500)
}).mouseout(function(){
$(this).find('.drop-down').slideUp(300);
});;

额外提示：我检查了你需要设置的css 。落下 { 位置：绝对的; 为了避免其他相关的div移动

http://jsfiddle.net/drukaman/ubntf4u7/

Answer 2

使用find()使用当前元素引用$(this)来获取触发事件的当前元素引用：

$('.nav-divs').mouseover(function(){
$(this).find('.drop-down').slideDown(500);

});

Answer 3

它正在更新所有子div。尝试使用find()关键字进行具体说明。像这样更新你的jquery。同时将vertical-align:top属性添加到inline-block元素以修复跳转问题。

  $('.nav-divs').mouseenter(function(){   
    $(this).find('.drop-down').slideDown(500);
  });

  $('.nav-divs').mouseout(function(){
    $(this).find('.drop-down').slideUp(300);
  });

.nav-divs {
    background-color: #c0392b;
    height: auto;
    width: 100px;
    display: inline-block;
    margin-left: 50px;
    line-height: 30px;
    font-family: Franklin Gothic Medium Cond;
    vertical-align:top;
}

Answer 4

希望它可以帮助你，干杯：D

jsfiddle.net/stormspirit/7hpknkbo/

Answer 5

扩展ehsan的回答：这是小提琴：

$('.nav-divs').mouseover(function () {
    $(this).find('.drop-down').slideDown(500);

    //$('.drop-down').slideDown(500);

});

$('.nav-divs').mouseout(function () {
    $(this).find('.drop-down').slideUp(500);
    //$('.drop-down').slideUp(300);
});

http://jsfiddle.net/learner420/rp37duth/

当另一个div悬停在jQuery上时，Div下降

5 个答案: