0

我已经能够制作一个 jQuery 下拉菜单，但是，当其中一个子链接翻转时，我无法让它保持展开状态。

代码：

<li>
    <a  onmouseover="$('.dropdown-1').slideDown('medium');" href="/hosting">Why Veoloo</a>
      <ul class="dropdown-1">
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">The Reasons (15)</a></li> 
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Customer Testimonials</a></li>
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Our Support Scope</a></li>
      </ul>
    </li>
4

2 回答 2

3

html:

<li id="menu">
  <a href="/hosting">Why Veoloo</a>
  <ul class="dropdown-1">
    <li><a href="#">The Reasons (15)</a></li> 
    <li><a href="#">Customer Testimonials</a></li>
    <li><a href="#">Our Support Scope</a></li>
  </ul>
</li>

javascript：

$(function(){
  $('.dropdown-1').hide();
  $('#menu').hover(function(){
        $('.dropdown-1').slideDown('medium');
  }, function(){
        $('.dropdown-1').slideUp('medium');
  });
})

例子：

http://jsfiddle.net/gurPn/1/

[编辑]： 更新为使用悬停方法 (jQuery) 并触发父容器的悬停（这允许仅在提供所需下拉效果的容器上捕获 mouseleave 事件）。

于 2010-12-31T21:51:32.777 回答
0

我假设您正在使用鼠标悬停和鼠标移出？（你没有发布你的代码）。问题在于，如果您的元素会触发鼠标悬停事件，那么您也会获得鼠标移出事件。mouseenter 会为你清理这个。而且，下拉列表必须是使其下拉的父元素的子元素。

<script type="text/javascript"> 
$(document).ready(function(){ 

     $(".sidebar").mouseenter( 
         function pl(){ 
               $(".sidebar").stop().animate({width: "184px",left:"760px"},750,"linear"); 
 }
     ); 
     $(".sidebar").mouseleave( 
          function pl2(){ 
               $(".sidebar").stop().animate({left: "900px",width: "45px"},750,"linear"); 
          }
     );

}); 
</script>

在线示例http://sdfreelance.vistapanel.net/

更新

您需要将函数放在第一个 LI

<li id="dropdown">
   <a  href="/hosting">Why Veoloo</a>
   <ul class="dropdown-1">
      <li ><a href="#">The Reasons (15)</a></li> 
      <li ><a href="#">Customer Testimonials</a></li>
      <li ><a href="#">Our Support Scope</a></li>
   </ul>
</li>


    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#dropdown").mouseenter(

如果在鼠标移过菜单之前未加载所有必需的脚本，则直接在标签上使用 onmouseover 将导致错误。

于 2010-12-31T21:43:48.190 回答