1

我做了一个下拉菜单，其中包含下拉菜单中的选项。

我正在使用以下 jQuery

$(document).ready(function() {
    $(".menu_item").hover(function() {
        $(".menu_options").slideDown(400);
    }, function() {
        $(".menu_options").slideUp(400);
    });
});

我遇到的问题是，当它向下滑动并且我继续向下滑动的 div 时它消失了 - 这是设置的屏幕截图

截屏

该区域的 HTML 是

<div class="menu">
            <div class="menu_item" id="1">
                Landlord Packages
            </div>
            <div class="spacer"></div>
            <div class="menu_item">
                Single Items
            </div>
            <div class="menu_options" id="1"></div>
        </div>

预先感谢您的帮助 ：-）

JSFiddle 脚本http://jsfiddle.net/pCTXq/

4

3 回答 3

2

尝试

$(document).ready(function() {
    $(".menu_item, .menu_options").hover(function() {
        $(".menu_options").stop(true, true).slideDown(400);
    }, function() {
        $(".menu_options").stop(true, true).delay(10).slideUp(400);
    });
});

这应该做你需要的。

我的小提琴：http: //jsfiddle.net/MCvsd/54/

编辑：您提供的小提琴，更新：http: //jsfiddle.net/pCTXq/1/

于 2013-04-23T14:11:32.943 回答
0

嵌套是一种方式，但如果您仍然不想使用嵌套，您可以执行以下操作

$(document).ready(function() {
    $(".menu_item").hover(function() {
        $(".menu_options").slideDown(400);
    });
    $(".menu_options").mouseleave(function () {
        $(".menu_options").slideUp(400);
    });
});
于 2013-04-23T14:16:13.833 回答
0

这里的问题是您正在观看悬停以向下.menu_item滑动.menu_options，但由于.menu_options在 之外.menu_item，将鼠标移动到.menu_options将隐藏它。

你可以通过.menu_options在每个.menu_itemdiv 中嵌套你的来解决这个问题。最好有一个 JSfiddle 或 codepen（使用你的 css）来解决这个问题。 

<div class="menu">

  <div class="menu_item" id="1">
      Landlord Packages
  </div>

  <div class="spacer"></div>

  <div class="menu_item">
      Single Items
     <div class="menu_options" id="1"></div>
  </div>
</div>
于 2013-04-23T14:11:12.217 回答