Question

I have a list of links using wp_nav_menu so they’re easily editable by the client. Those output a type of menu. Separate from that I have a group of custom posts that are directly tied to those list items. I want the information tied to the menu items to appear when I hover over the list items but STAY visible if I am also clicking on a link within them.

Below is the code I am currently using, which sort of works, but the items show periodically. Has anyone else tried to achieve this?

$('#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();
        });
    });
});

Also, my code for the page looks like this :

<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>

Modified the Top jQuery code to be :

$('#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();
    });
});

Based on suggestions. It works but looks buggy. I will be altering timing and class adjustments to see if it can be improved.

Answer 1

try this:

$('#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();
    })
});

the basic idea is that if you mouse from the hovered element to the div, the hide code doesn’t happen, and if you mouse out of the div, the div gets hidden.