ul li使用jQuery显示/隐藏

但我不能得到子菜单项隐藏在mouseout。

它隐藏本身的一举一动

我的jQuery代码：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('ul ul').hide(); 
     $('ul li.top_menu_first a').removeAttr("href"); 
     $('ul li.top_menu_first > a').mouseover(function(event) { 
      $(this).parent().find('ul').show('slow'); 
     }); 

     $('ul li.top_menu_first ul').mouseout(function(event) { 
      $('ul ul').hide('slow'); 
     }); 
    }); 
</script>

我HTMLcode：

<div id="top_menu"> 
    <ul> 
     <li class="top_menu_first"><a href="http://google.com">ABC</a> 
      <ul> 
       <li><a>1</a></li> 
       <li><a>2</a></li> 
       <li><a>3</a></li> 
      </ul> 
     </li> 
     <li class="top_menu_first"><a>DEF</a></li> 
     <li class="top_menu_first"><a>GHI</a></li> 
     <li class="top_menu_first"><a>JKL</a> 
      <ul> 
       <li><a>4</a></li> 
       <li><a>5</a></li> 
       <li><a>6</a></li> 
      </ul> 
     </li> 
     <li class="top_menu_first"><a>MNO</a> 
      <ul> 
       <li><a>7</a></li> 
       <li><a>8</a></li> 
      </ul> 
     </li class="top_menu_first"> 
    </ul> 
</div> 
<div id="footer"></div>

请如果有人能帮助

来源

2012-10-13 InglaDesign בניית אתרים

''?? – elclanrs

试着用'mouseleave'而不是'mouseout'。 – hjpotter92

我想尝试这样[FIDDLE]（http://jsfiddle.net/gmeMb/1/）？ – adeneo

您的代码跟踪的子菜单mouseOut。我假设你想让子菜单在从菜单名称中滑出时隐藏。

删除ul 从$('ul li.top_menu_first ul').mouseout(function(event) {（ http://jsfiddle.net/qgbtd/）确保您加载的jQuery在你的HTML 另外像评论说使用mouseleave()给它一个更好的行为

来源

2012-10-13 22:53:56 raam86

感谢的配发都ansers做的工作 –

אתהיכולללחוץעלהוימתחתלדירוגשלהשאלהכדילבחוראותהכתשובההטובהביותר – raam86

我不认为你需要的jQuery这个。试着让它只用CSS来工作，这是合乎逻辑的一步。如果你需要动画，使用CSS3转换，而jQuery就像老式浏览器的回退，如果你真的需要动画的话，否则就这样吧，旧的浏览器不会让不透明的动画变成动画，没什么大不了的。

演示：http://jsbin.com/uqebor/9/edit

ul.menu, 
ul.menu ul { 
    position: relative; 
    list-style: none; 
    padding: 0; 
    -webkit-transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
} 
ul.menu li { 
    margin: 1px 0; 
} 
ul.menu > li { 
    float: left; 
    margin: 0 .5em; 
} 
ul.menu a { 
    text-decoration: none; 
    display: block; 
    width: 100px; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    border: 1px solid black; 
    background: white; 
} 
ul.menu ul { 
    visibility: hidden; 
    height: 0; 
    width: 0; 
    opacity: 0; 
} 
ul.menu li:hover ul { 
    width: auto; 
    height: auto; 
    visibility: visible; 
    opacity: 1; 
}

来源

2012-10-13 23:20:38 elclanrs

非常感谢鼠标离开批准。 Avi Avi –

ul li使用jQuery显示/隐藏

回答

相关问题