JQuery滑动菜单而不是向下滑动菜单_Jquery_Html_Css_Menu

JQuery滑动菜单而不是向下滑动菜单

jquery html css menu

JQuery滑动菜单而不是向下滑动菜单,jquery,html,css,menu,Jquery,Html,Css,Menu,我有这个菜单： <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <script> $(function() { $("#menu").find("li").each(function() { if ($(this

我有这个菜单：

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <script>
   $(function() {
    $("#menu").find("li").each(function() {
     if ($(this).find("ul").length > 0) {
      $(this).mouseenter(function() {
       $(this).find("ul").stop(true, true).slideDown(); 
      }); 
      $(this).mouseleave(function() {  
       $(this).find("ul").stop(true, true).slideUp();  
      });
     }
    });
   });
  </script>
  <style>
   #menu {
    display:block;
    margin:120px auto 20px;
    border:1px solid #222;
    position:relative;
    background-color:#6a6a6a;
    font:16px Tahoma, Sans-serif;
   }  
   #menu ul {
    padding:0;
    margin:0;
   }  
   #menu li {
    position:relative;
    float:left;
    list-style-type:none;
   }  
   #menu ul:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
   }  
   #menu li a {
    display:block;
    padding:10px 20px;
    border-left:1px solid #999;
    border-right:1px solid #222;
    color:#eee;
    text-decoration:none;
   }  
   #menu li a:focus {
    outline:none;
    text-decoration:underline;
   }  
   #menu li:first-child a {
    border-left:none;
   }  
   #menu li.last a {
    border-right:none;
   }  
   #menu a span {
    display:block;
    float:right;
    margin-left:5px;
   }  
   #menu ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    background:#6a6a6a;
   }  
   #menu ul ul li {
    float:none;
   }  
   #menu ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:14px;
   }

   a:hover {
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="menu">
   <ul>
    <li>
     <a>Item1</a>
    </li>
    <li>
     <a>Item2</a>
     <ul>
      <li><a href="#">item2-1</a></li>
      <li><a href="#">item2-2</a></li>
      <li><a href="#">item2-3</a></li>
     </ul>
    </li>
   <li>
    <a>Item3</a>
    <ul>
     <li><a href="#">item3-1</a></li>
     <li><a href="#">item3-2</a></li>
     <li><a href="#">item3-3</a></li>
    </ul>
   </li>
   <li>
    <a>Item4</a>
   </li>
  </ul>
 </div>
 <body>
<html>


$（函数（）{
$（“#菜单”）.find（“li”）.each（函数（）{
如果（$（this.find（“ul”）.length>0）{
$（this.mouseenter（function（））{
$（this.find（“ul”）.stop（true，true.slideDown（）；
}); 
$（this.mouseleave（function（）{
$（this.find（“ul”）.stop（true，true.slideUp（）；
});
}
});
});
#菜单{
显示：块；
利润率：120px自动20px；
边框：1px实心#222；
位置：相对位置；
背景色：#6A6A；
字体：16px塔荷马，无衬线；
}  
#菜单ul{
填充：0；
保证金：0；
}  
#菜单里{
位置：相对位置；
浮动：左；
列表样式类型：无；
}  
#菜单ul：之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
}  
#菜单李a{
显示：块；
填充：10px 20px；
左边框：1px实心#999；
右边框：1px实心#222；
颜色：#eee；
文字装饰：无；
}  
#菜单a：焦点{
大纲：无；
文字装饰：下划线；
}  
#菜单李：第一个孩子a{
左边界：无；
}  
#最后一道菜{
边界权：无；
}  
#菜单跨度{
显示：块；
浮动：对；
左边距：5px；
}  
#菜单{
显示：无；
宽度：100%；
位置：绝对位置；
左：0；
背景：#6A6A；
}  
#菜单ul-li{
浮动：无；
}  
#菜单{
填充物：5px10px；
左边界：无；
边界权：无；
字体大小：14px；
}
a:悬停{
光标：指针；
}














我不完全确定问题出在哪里，但您应该能够使用更复杂的选择器将代码简化为以下内容：
$("#menu > ul > li:has(ul)").mouseenter(function() { 
    $(this).find("ul").stop(true, true).slideDown();  
}).mouseleave(function() {  
    $(this).find("ul").stop(true, true).slideUp();  
});

编辑：我明白了，您希望菜单的物理方向向上而不是向下。要做到这一点，您的菜单必须绝对位于底部。然后高度的改变会使它们上升
示例：
下面是进一步的代码缩减：
设置嵌套列表的底部会起作用

注意：使用jquery UI：
.show("slide", { direction: "down" });
.hide("slide", { direction: "up" });

+1几秒钟后你就拿到了，所以这绝对不是剽窃：）谢谢@karim79。一开始我对这个问题不感兴趣。迟到了o）
$("#menu > ul > li:has(ul)").hover(function(e) { 
    $(this).find("ul").stop(true, true)['slide' + (e.type === 'mouseenter' ? 'Down' : 'Up')]();  
});

#menu ul ul {
    bottom:38px;
} 

.show("slide", { direction: "down" });
.hide("slide", { direction: "up" });