jQuery: оставляйте открытым дочерний элемент при наведении на него курсора - PullRequest
Новая
       1

jQuery: оставляйте открытым дочерний элемент при наведении на него курсора

4 голосов
/ 29 октября 2010

Мой вопрос похож, но отличается от jquery-hover-menu-when-hovering-over-child-menu-исчезает .

У меня изначально было событие hover на li.item, которое было немного странным, но я делал то, что мне было нужно. Я переключил указатель мыши на диапазон, чтобы событие вызывало текстовый блок, а не блок списка, который расширяет всю ширину списка.

Эффект, которого я пытаюсь достичь, это когда вы зависаете над ul.sub. Я бы хотел продолжить анимацию в очереди из span.text при наведении, которая отображает его, но также оставить его открытым.

То, что происходит, - то, что мышь покидает промежуток, поэтому li.item запускает свою мышиную часть триггера.


Страница jsFiddle


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

   #main{width:10em;}
   .head,.item{border:1px solid black;padding:.5em;}
   .head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
   .item{background:#f90;}
   .sub{display:none;}
   .sub li{padding-left:1em;}
   .text,.sub{cursor: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');
      });
   });

Edit:

Я думаю, что что-то в этом роде - то, что мне нужно, однако анимация обновляется при переходе от сабвуфера к пролету. 

$(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 Ответ

5 голосов
/ 29 октября 2010

Разделите поведение 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');
    });
});

Таким образом, зависание не вызывается пробелом, а это то, что вам нужно.

...