jQuery:将鼠标悬停在其上时保持切换的子元素打开

Posted

技术标签:

【中文标题】jQuery:将鼠标悬停在其上时保持切换的子元素打开【英文标题】:jQuery: keep toggled child element open when hovering over it 【发布时间】:2011-05-02 13:41:03 【问题描述】:

我的问题类似,但与jquery-hover-menu-when-hovering-over-child-menu-disappears不同。

我最初在li.item 上进行了悬停事件,这有点古怪,但做了我需要它做的事情。我将悬停切换到跨度,以便事件会在文本块上触发,而不是在列表块上触发,这会扩展列表的整个宽度。

我想要达到的效果是当悬停在ul.sub 上时。我希望它从span.text 的悬停继续播放队列中的动画,它正在显示它,但也保持打开状态。

发生的事情是鼠标离开了 span,所以 li.item 正在触发触发器的 mouseout 部分。

jsFiddle Page

html


   <ul id="main">
       <li class="head">Title Bar</li>
       <li class="item odd">
           <span class="text">A</span>
           <ul class="sub">
               <li>1</li>
               <li>2</li>
           </ul>
       </li>
       <li class="item even">
           <span class="text">B</span>
           <ul class="sub">
               <li>3</li>
               <li>4</li>
           </ul>
       </li>
       <li class="item odd">
           <span class="text">C</span>
           <ul class="sub">
               <li>5</li>
               <li>6</li>
           </ul>
       </li>
       <li class="item even">
           <span class="text">D</span>
           <ul class="sub">
               <li>7</li>
               <li>8</li>
           </ul>
       </li>
   </ul>

CSS


/* colors used are not for production; they are
   used only to enhance the example's visual distinction */

   #mainwidth:10em;
   .head,.itemborder:1px solid black;padding:.5em;
   .headfont-weight:bold; background:#336; color:#fff; cursor:pointer;
   .itembackground:#f90;
   .subdisplay:none;
   .sub lipadding-left:1em;
   .text,.subcursor:pointer;

javascript


   $(document).ready(function()
      // specific here because of other divs/list items

      $('#main li.item span.text').hover(function()
         $(this).siblings().stop(true,true).toggle('slow');     
      );       

      $('li.head').hover(function()
         $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
      );
   );

编辑:

我认为这些方面的东西是我需要的,但是从 sub 到 span 时动画会重新触发。

$(document).ready(function()
   // specific here because of other divs/list items

   $('#main li.item span.text').hover(
       function()$(this).siblings().stop(false,true).show('slow');
      ,function()$(this).siblings().stop(true,true).hide('slow');     
   );    

   $('#main li.item ul.sub').hover(
        function()$(this).stop(false,true).show();
       ,function()$(this).stop(false,true).hide('slow');
   );    

   $('li.head').hover(function()
      $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
   );
);

【问题讨论】:

【参考方案1】:

将hover 行为拆分为两个组成部分,mouseenter 和mouseleave。还将toggle() 拆分为show() 和hide()。将mouseenter 绑定到span.text,将mouseleave 绑定到li.item

$(document).ready(function() 
    // specific here because of other divs/list items
    $('#main li.item span.text').mouseenter(function() 
        $(this).siblings().stop(true, true).show('slow');
    );

    $('#main li.item').mouseleave(function() 
        $(this).children("ul").stop(true, true).hide('slow');
    );

    $('li.head').hover(function() 
        $(this).parent().find('ul.sub').stop(true, true).toggle('slow');
    );
);

这样,悬停不会由空格触发,这是您想要的。

【讨论】:

我刚刚发布了类似的内容:查看编辑;但是,我认为您的解决方案可以使从跨度到潜艇再返回时一切都更加流畅。 好吧,你仍然调用hover(),所以你不能拆分mouseentermouseleave行为并将它们绑定到两个不同的元素,这是我回答的关键。 @Frederic - 是的 :) 没错,只是说我要去同一个地方,但你比我先到了那里。我会先测试它然后回来加/检查你=] 好,现在你正在这样做,但我应该指出我的答案没有表现出你的问题:从 sub 到 span 时动画不会重新触发 :) 您是否有一份可以工作的 jsFiddle 副本,一切看起来都有效,但由于某种原因它没有触发节目。 编辑: 没关系,“mouseenter”中的拼写错误两个“e”

以上是关于jQuery:将鼠标悬停在其上时保持切换的子元素打开的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 当鼠标悬停在元素上时,如何继续动画?

悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

仅当我将鼠标悬停在其上时如何使图像出现

悬停在下拉菜单上时保持主导航项悬停 CSS

将鼠标悬停在按钮上时如何更改 div 的文本?

jQuery 菜单应该保持打开状态