現在の兄弟に含まれていないホバー上の要素を表示し、マウスを移動したときに非表示にするか、別の要素にカーソルを置いたときに非表示にするにはどうすればよいですか？

Question

私はwp_nav_menuを使ってリンクのリストを持っているので、クライアントが簡単に編集できるようになっています。それらは一種のメニューを出力します。それとは別に、これらのリスト項目に直接関連するカスタム投稿のグループがあります。私はリストアイテムの上にマウスを置いたときに表示されるメニュー項目に結びつけられた情報を表示したいが、その中のリンクもクリックしていると表示されていることが望ましい。

以下は、私が現在使用しているコードですが、どの作品が定期的に表示されていますか？他の誰かがこれを達成しようとしましたか？提案に基づいて

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

：トップjQueryのコードがあることを修正

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

：

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

また、ページのための私のコードは次のようになります。それは動作しますが、バグがあります。私はそれが改善できるかどうかを見るためにタイミングとクラスの調整を変更する予定です。

Answer 1

この試してみてください。基本的な考え方は、div要素にホバー要素からあなたのマウス場合は、非表示のコードが起こらない、とdiv要素のうち、あなたのマウスならば、div要素が得るということである

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

を隠された