3

我有以下悬停脚本来处理导航栏中子菜单的向下滑动:

$j('body').ready(function() {
    $j('.menu-item').hover(function() {
        $j(this).find('.sub-menu').slideDown("slow");
    },
        function() {
            $j(this).find('.sub-menu').slideUp("slow");
        });
});

目前,正如预期的那样,只要用户将鼠标悬停在 .menu-item div 上,就会激活向下滑动。但是,我只想在用户将鼠标悬停在 .menu-item div 中包含的子 div 上时激活向下滑动,即 .bottom_nav。

HTML 格式为:

<li class="menu-item">
<div class="box">
    <div class="top_nav">
    </div>
    <div class="clear">
        <div class="bottom_nav">
            <div class="left_nav">
            </div>
            <div class="center_nav">
                <a href="http://soteriabrighton.co.uk/news/">news</a>
            </div>
            <div class="right_nav">
            </div>
            </a>
        </div>
    </div>
    <ul class="sub-menu">
        <li>
        <div class="box">
            <div class="top_nav">
            </div>
            <div class="clear">
                <div class="bottom_nav">
                    <div class="left_nav">
                    </div>
                    <div class="center_nav">
                        <a href="http://soteriabrighton.co.uk/news/events/">events</a>
                    </div>
                    <div class="right_nav">
                    </div>
                    </a>
                </div>
            </div>
            </li>
        </ul>
        </li>

您可以在此页面上看到正在运行的导航项目,特别是在“新闻”项目上,该项目有一个事件页面的下拉菜单。由于网站正在开发中,您将需要输入以下凭据:

用户名:访客

密码:stackoverflow

4

2 回答 2

2

我通过添加以下内容对此进行了排序:

$j('.sub-menu').hover(function() {
    $j(this).stop().slideDown("fast");
}, function() {
    $j(this).stop().slideUp("slow");
});
于 2012-07-14T18:49:01.320 回答
1

您所要做的就是修改您的选择器以指定该特定内容div,然后在该hover()方法中,将 DOM 导航回.menu-item元素,并在其中找到.bottom_nav要设置动画的元素:

$j('.menu-item .bottom_nav').hover(function() {
    $j(this).closest('.menu-item').find('.sub-menu').slideDown("slow");
},
function() {
    $j(this).closest('.menu-item').find('.sub-menu').slideUp("slow");
});

这仅将该hover()方法应用于在父级中.bottom_nav找到的元素。.menu-item

参考:

于 2012-07-08T18:44:41.067 回答