Закрытие многоуровневого выпадающего меню jQuery

У меня есть выпадающее меню, которое расширяется при нажатии, а не зависает. Проблема в том, что когда я открываю подменю, я не могу заставить их закрыться, когда я перемещаю мышь из текущего подменю в его родительское меню. Он должен скрыть предыдущее меню вплоть до панели навигации (вверху) и скрыть все меню, как только я оставлю любое из своих детских меню и наведите курсор на тело страницы.Закрытие многоуровневого выпадающего меню jQuery

Fiddle: http://jsfiddle.net/WjE9y/11/

HTML:

<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> --> 
<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="includes/menu.js"></script></script> 
    <link type="text/css" href="includes/menu.css" rel="stylesheet" /> 
</head> 
<body> 
    <div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;"> 
     <div id="menuJQ"> 
      <ul class="menuJQ"> 
       <li class="parent"><a href="#"><span>Home</span></a></li> 
       <li><a class="parent" href="#"><span>Product View</span></a> 
        <div> 
         <ul> 
          <li><a href="#"><span>DevTask Search</span></a></li> 
          <li><a href="#"><span>Active Machines</span></a></li> 
         </ul> 
        </div> 
       </li> 
       <li class="parent"><a href="#"><span>Request Tool</span></a></li> 
       <li><a href="#" class="parent"><span>Search</span></a> 
        <div> 
         <ul> 
          <li><a href="#"><span>DevTask Search</span></a></li> 
          <li><a href="#"><span>Active Machines</span></a></li> 
          <li><a href="#"><span>Integrity Query</span></a></li> 
          <li><a href="#"><span>Internal DevTasks</span></a></li> 
          <li><a href="#" class="parent"><span>Results</span></a> 
           <div> 
            <ul> 
             <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li> 
             <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a> 
              <div> 
               <ul> 
                <li><a href="#"><span>DevTask Search</span></a></li> 
                <li><a href="#"><span>Active Machines</span></a></li> 
                <li><a href="#"><span>Integrity Query</span></a></li> 
               </ul> 
              </div> 
             </li> 
            </ul> 
           </div> 
          </li> 
          <li><a href="#"><span>Issues for Stability Team</span></a></li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

JS:

$(document).ready(function(){ 
    $(function() { 
      $('#menuJQ > ul li').click(function(e) { 
       e.preventDefault(); 
       $('ul:first', this).show(); 
      }); 
     }); 

    var submenu_active = false; 
    $('#menuJQ ul').mouseenter(function() { 
     submenu_active = true;  
    }); 

    $('#menuJQ ul').mouseleave(function() { 
     submenu_active = false; 
     setTimeout(function() { 
      if (submenu_active === false) $('ul', this).hide("fast");}); 
    }); 
});

источник

2013-02-14 B3st0fth3w0rst

Может также воссоздать пример в jsFiddle и разместить ссылку на него, так как мы не можем видеть, как он выглядит здесь. –

@ Сэмюэль Лев скрипка добавлена. я изменил цвета, так что теперь их легче увидеть. – B3st0fth3w0rst

Я дал бы div S, которые содержат любое подменю класс как submenu:

... 
<li><a href="#" class="parent"><span>Search</span></a> 
    <div id="submenu"> 
     <ul> 
      ...

Затем вы можете сделать что-то вроде этого:

$(document).ready(function(){ 
    $(function() { 
      $('#menuJQ > ul li').click(function(e) { 
       e.preventDefault(); 
       $('ul:first', this).show(); 
      }); 
     }); 

    $('.submenu').mouseleave(function() { 
     $('ul', this).hide("fast"); 
    }); 
});

Fiddle here.

источник

2013-02-14 08:46:48 mccannf

Отлично! Всем спасибо! stackoverflow ftw. Благодаря @mccannf ваше решение отлично работает. – B3st0fth3w0rst

Закрытие многоуровневого выпадающего меню jQuery

ответ

Смежные вопросы