Question

我有一个使用wp_nav_menu的链接列表，因此客户端可以轻松编辑它们。那些输出一种菜单。与此分开，我有一组直接绑定到这些列表项的自定义帖子。当我将鼠标悬停在列表项上时，我希望显示与菜单项关联的信息，但如果我也点击其中的链接，则保持可见。

以下是我目前正在使用的代码，哪种作品，但这些项目会定期显示。还有其他人试图实现这个目标吗？

$('#nav > li').each(function(){
    var first = $(this).attr('class').replace(/^(\S*).*/, '$1')

    $(this).hover(function(){
        $('.programs').show(100);
        $('.program_home').addClass('visuallyhidden');
        $('#' + first).toggleClass('visuallyhidden');
    }, function() {
        $('#' + first).mouseout(function(){
            $(this).addClass('visuallyhidden');
            $('.programs').hide();
        });
    });
});

此外，我的页面代码如下所示：

<section class="switcher">
    <nav class="grid_3">
        <ul id="nav" class="menu">
            <li id="menu-item-4512" class="busprof menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/business-professionals/"><strong>Business Professionals</strong><span class="desc">Courses &amp; Certificates for Business and Engineering professionals</span><span class="arrow"></span></a></li>
            <li id="menu-item-4516" class="creative_writing menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/creative-writing/"><strong>Creative Writing</strong><span class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec </span><span class="arrow"></span></a></li>
            <li id="menu-item-4528" class="languages menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/languages-translation/"><strong>Languages &#038; Translation</strong><span class="desc"> </span><span class="arrow"></span></a></li>
            <li id="menu-item-4527" class="arts_science menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/arts-science/"><strong>Arts &#038; Science</strong><span class="desc"> </span><span class="arrow"></span></a></li>
            <li id="menu-item-4526" class="elp menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/english-language-program/"><strong>English Language Program</strong><span class="desc"> </span><span class="arrow"></span></a></li>
            <li id="menu-item-4525" class="online menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/online-distance-learning/"><strong>Online &#038; Distance Learning</strong><span class="desc"> </span><span class="arrow"></span></a></li>
    </ul>
</nav>
<div class="programs">
    <dl id="online" class="visuallyhidden program_home">
        <dd>Defenition</dd>
            <dt class="classes">Definition Title</dt>
            <dd>
                <ul>
                    <li><a href="#">Link</a></li>
                </ul>
            </dd>
            <dd>
                <blockquote>excerpt</blockquote>
            </dd>
            <dt class="learn_more"><span>Learn</span> more.</dt>
        </dl>
        <dl id="elp" class="visuallyhidden program_home">
            <dd>Defenition</dd>
            <dt class="classes">Definition Title</dt>
            <dd>
                <ul> 
                    <li><a href="#">Link</a></li>
                </ul>
            </dd>
etc...
</section>

将Top jQuery代码修改为：

$('#nav > li').each(function(){
    var first = $(this).attr('class').replace(/^(\S*).*/, '$1'), timer;

    $(this).hover(function(){
        clearTimeout(timer);
        $('.program_home').addClass('visuallyhidden');
        $('.programs').fadeIn(200);
        $('#' + first).removeClass('visuallyhidden');
    }, function() {
        timer = setTimeout(function(){
            $('#' + first).addClass('visuallyhidden');
            $('.programs').fadeOut(200);
        },75);
    });
    $('#' + first).hover(function(){
        clearTimeout(timer);
    },function(){
        $(this).addClass('visuallyhidden');
        $('.programs').hide();
    });
});

基于建议。它有效，但看起来很麻烦。我将改变时间和课程调整，看看是否可以改进。

Answer 1

试试这个：

$('#nav > li').each(function(){
    var first = $(this).attr('class').replace(/^(\S*).*/, '$1'), timer;

    $(this).hover(function(){
        $('.programs').show(100);
        $('.program_home').addClass('visuallyhidden');
        $('#' + first).toggleClass('visuallyhidden');
    }, function() {
        timer = setTimeout(function(){
            $('#' + first).addClass('visuallyhidden');
            $('.programs').hide();
        },10);
    });
    $('#' + first).hover(function(){
        clearTimeout(timer);
    },function(){
        $(this).addClass('visuallyhidden');
        $('.programs').hide();
    })
});

基本思想是，如果你将鼠标从悬停元素鼠标移动到div，则隐藏代码不会发生，如果你将鼠标移出div，则div会被隐藏。

如何在当前兄弟姐妹中显示悬停元素然后在鼠标移开时将其隐藏或将鼠标悬停在另一个元素上？

1 个答案: