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

Posted 2023-02-25

【中文标题】当另一个 div 悬停在 jQuery 上时，div 下拉

【英文标题】：Div drop down when another div is hovered over jQuery

【发布时间】：2014-08-07 06:46:15

【问题描述】：

我有一个带有类 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 还很陌生，因此我们将不胜感激。

谢谢！

【参考方案1】：

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

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

);

【参考方案2】：

它正在更新所有的子 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;

【参考方案3】：

将您的 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/

【讨论】：

这些答案对您有帮助吗？ :-/

【参考方案4】：

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

jsfiddle.net/stormspirit/7hpknkbo/

【参考方案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/