Question

这是我的简单下拉式esq菜单的jquery。不过我遇到了麻烦。当用户将鼠标悬停在.mainMenuDiv上时，当我们将鼠标悬停在.SubMenu div上时，我希望div向下滑动！

帮助！：）

    $(function () {
            var tabContainers = $('div.subMenu > div');
            tabContainers.hide();

            $('.mainMenuDiv a').hover(
            function () {
                tabContainers.filter(this.hash).stop(true, true).slideDown();
            },
            function(){
                tabContainers.filter(this.hash).stop(true, true).slideUp();
            });
    });


<div class="mainMenu" align="center">
    <table cellpadding="0" cellspacing="0" border="0" width="950">
        <tr>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/new/#new" class="mainMenuLink" id="1">I'm New</a></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/ministries/#ministries" class="mainMenuLink">Ministries</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/beliefs/#beliefs" class="mainMenuLink">Beliefs+Mission</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/listen/#listen" class="mainMenuLink">Listen</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/connect/#contact" class="mainMenuLink">Connect</a></div></td>
            <td width="100%"></td>
        </tr>
    </table>
</div>
    <div class="subMenu">
        <div id="new">
            <h2>I'm New</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

我知道HTML并不好......但这是我必须要处理的......

Answer 1

如果我理解正确，我认为你只需使用mouseover事件而不是hover，例如：

$(function () {
        var tabContainers = $('div.subMenu > div');
        tabContainers.hide();

        $('.mainMenuDiv a').mouseover(function() {

            //hide all the containers
            tabContainers.slideUp();

            //slide this one down
            tabContainers.filter(this.hash).stop(true, true).slideDown();
        });

        //slide up the container when the mouse is over anything else
        $('body :not("div.subMenu > div, .mainMenu a")').mouseover(function() {
            tabContainers.slideUp();
        });
});

现在，'当前'一个将保持打开状态，直到鼠标击中另一个链接。

Answer 2

我不确定我是否理解正确，但您可以使用简单的逗号将选择器链接在一起。

所以也许这会起作用

$('.mainMenuDiv a, div.subMenu > div').hover(

如果我遗漏了某些内容，请发布您的HTML代码。

jQuery下拉 - 悬停其他类？

2 个答案: