Как отключить элемент div подменю по выходу

Question

Привет, У меня есть меню и подменю, есть элемент div для подменю. Я могу получить элемент div, когда я наводил на гиперссылку моего первого меню li, но он не исчезает, когда я вынимаю мою мышь из элемента div. Он постоянно появляется, поэтому я хочу скрыть элемент div, когда я вытаскиваю div или где-то в другом месте. В результате мы не записали код для «отображения», none "из-за этого при наведении ссылки он работает, но он остается.

Html

<ul class="main-nav"> 
<li ><a href="#" id="menu1">Products & Services</a></li> 
<li><a href="#" id="menu1">Solution and Technologies</a></li> 
<li><a href="#" id="menu1">About Us</a></li> 
<li><a href="#" id="menu1">Investors</a></li> 
<li style="border:none;"><a href="#" id="menu1">Newsroom</a></li> 
</ul> 
<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv" style=" position:absolute; font-size:12px; z-index:1; display:none; border:1px solid #D8D8D8;"> 
<a id="consumer1" style="visibility:hidden;" href="#">Consumer & Home</a> 
<a href="#">Aerospace & Defense</a> 
<a href="#">Safety & Security</a> 
<a href="#">Scanning & Mobile Productivity</a> 
</div> 

Css

.dropmenudiv a{ background:url(images/dropdown_bg.jpg); text-decoration:none; display:block; line-height:14px; padding:2px;} 
    ul.main-nav{list-style:none; border:1px solid #666; overflow:hidden; background:url(images/mnu_grad_normal.jpg) repeat-x; height:37px; line-height:36px;} 
    ul.main-nav li { float:left; font-size:12px; border-right:1px solid #999; padding:0px 32px;} 
    ul.main-nav li a{ color:#000000; text-decoration:none;} 
    ul.main-nav li a:hover{ color:#FF0000;} 

JS:

$(document).ready(function() { 
     $('#menu1').mouseover(function(){ 
     $('#dropmenu1').css("display","block"); 
     $('#dropmenu1').css({'width':'202px','height':'auto'}); 
     $('#menu1').mouseout(function(){ 
     }); 

Answer 1

переплета с .on()

$(document).on('mouseenter','#divid',function(){ 
    // ... 
}) 

$(document).on('mouseleave','#divid',function(){ 
    // ... 
}) 

---

Рассмотрите использование hover

Метод .hover() связывает обработчики для обоих MouseEnter и MouseLeave события. Вы можете использовать его для простого применения поведения к элементу в течение времени, в течение которого мышь находится внутри элемента.

Использование:

$(selector).hover(handlerIn, handlerOut) 

---

Псевдо решение:

http://jsfiddle.net/7PH6d/1/

---

Дальнейшее чтение:

The friggin' API

Answer 2

Вы должны закрыть .mouseover. Ваш MouseOut-функция в функции наведения мыши:

$(document).ready(function() { 
     $('#menu1').mouseover(function(){ 
     $('#dropmenu1').css("display","block"); 
     $('#dropmenu1').css({'width':'202px','height':'auto'}); 
     }); //<----Close the mouseover 
     $('#menu1').mouseout(function(){ 
     $("#dropmenu1").css("display","none"); //Should work 
     }); 

Answer 3

В первом сделать ваши идентификаторы уникальны, то вы можете SetTimeout, чтобы приостановить исчезновение цели Див сразу после того, как мышь отходит от главного меню ссылки. Сценарий может выглядеть следующим образом:

$(document).ready(function() { 
    var target_div = null; // div#dropmenu1 etc. 
    var timer = false; // for delayed hide 
    $('.main-nav a').mouseenter(function() { 
     if (timer) { 
      clearTimeout(timer); 
      timer = false; 
     } 
     $('.dropmenudiv').css('display', 'none'); //hide all divs 
     target_div = $('#drop' + this.id); // #dropmenu1 etc. 
     target_div.css({ 
      "display": "block", //show 
      'width': '202px', 
       'height': 'auto' 
     }); 
    }).mouseleave(leaving); 

    $('.dropmenudiv').mouseenter(function() { 
     if (timer) { 
      clearTimeout(timer); 
      timer = false; 
     } 
     target_div = $(this); 
    }).mouseleave(leaving); 

    function leaving() { 
     target_div = null; 
     timer = setTimeout(function() { 
      var divs = $('.dropmenudiv'); 
      if (target_div) { 
       divs = divs.not(target_div); 
      } 
      divs.css('display', 'none'); 
      timer = false; 
     }, 2000); //hide after two seconds 
    } 
}); 

Работа jsfiddle: http://jsfiddle.net/7PH6d/4/

Answer 4

Делают это без JavaScript. Css только меню Css Dropdown menu и ссылка на Fiddle

<ul id="nav"> 
<li ><a href="#">Products & Services</a> 
    <ul> 
     <li><a id="consumer1" href="#">Consumer & Home</a></li> 
     <li><a href="#">Aerospace & Defense</a></li> 
     <li><a href="#">Safety & Security</a></li> 
     <li><a href="#">Scanning & Mobile Productivity</a></li> 
    </ul> 
</li> 
<li><a href="#">Solution and Technologies</a></li> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Investors</a></li> 
<li style="border:none;"><a href="#">Newsroom</a></li> 

</ul> 
#nav{ 
    list-style:none; 
    font-weight:bold; 
    margin-bottom:10px; 
     float:left; 
    width:100%; 
    } 
#nav li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
} 
#nav a{ 
    display:block; 
    padding:5px; 
    color:#fff; 
    background:#333; 
    text-decoration:none; 
} 
#nav a:hover{ 
    color:#fff; 
    background:#6b0c36; 
    text-decoration:underline; 
} 
#nav ul{ 
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
} 
#nav ul li{ 
    padding-top:1px; 
    float:none; 
} 
#nav ul a{ 
    white-space:nowrap; 
} 
#nav li:hover ul{ 
    left:0; 
} 
#nav li:hover a{ 
    background:#6b0c36; 
    text-decoration:underline; 
} 
#nav li:hover ul a{ 
    text-decoration:none; 
} 
#nav li:hover ul li a:hover{ 
    background:#333; 
} 

Answer 5

Вы использовали один и тот же идентификатор для нескольких элементов на странице, которая не является правильной процедурой.

Я внесла определенные изменения, и он работает, он может ответить на этот вопрос, но я бы посоветовал вам прочитать учебники по созданию меню, потому что это выглядит немного грязным.

Вот Fiddle: http://jsfiddle.net/Te3dW/ функция

Javascript:

$(document).ready(function(){ 
    $('li:nth-child(1),#dropmenu1').hover(function(){ 
    $('#dropmenu1').css("display","block"); 
    $('#dropmenu1').css({'width':'202px','height':'auto'}); 
    },function(){ 
     $('#dropmenu1').css("display","none"); 
    }); 
}); 

Днем Coding