Javascript 如何将仅css的megamenu转换为基于jquery的megamenu

我在我的网站上使用了一个超级菜单，它完全基于css。缺点是，它没有任何动画。这部电视剧突然开始播出。因此，我正在考虑将其转换为基于jquery的切换。这是当前的代码。如何将其转换为基于jQuery的

.dropdown-1column, 
.dropdown-2columns, 
.dropdown-3columns, 
.dropdown-4columns,
.dropdown-5columns {
   margin:-1px auto  0 -285px;
   float:left;
   position:absolute;
   text-align:left;
   padding:10px 5px 10px 5px;
   border:1px solid #dedede;
   background:#fff;
   z-index:999;
   display:none;    
}


.menu li:hover .dropdown-1column, 
.menu li:hover .dropdown-2columns, 
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {
    display:block; 
}

---

这是代码

我想这基本上符合您的要求。可能需要改进：

基本上，我给每个有下拉列表的LI添加了一个“hasdropdown”类，并且给每个dropdown DIV添加了一个“dropdown”类

然后使用jQuery激活slideToggle函数：

jQuery("div#menu ul.menu li.has-dropdown").hover(
 function () {
   $(this).find("div.dropdown").slideToggle();
 },
 function () {
   $(this).find("div.dropdown").slideToggle();
 }
);

---

如果对浏览器兼容性没有太多限制，css3中就存在动画。你想要什么样的动画？你能发布你的HTML吗？查看现有功能将有助于下拉列表显示动画。就像jquery滑下一样。我尝试了不透明度0和1的技巧。但它不起作用，因为我的下拉菜单在左边使用了-285px。@user632347不应该像这样重要吗？一定要在某个地方停一下：）@Billy Moat:谢谢，它就像魔术一样。现在有什么办法可以让它也适用于非javascript浏览器吗？@Huangism：在哪里添加呢？非javascript浏览器应该只使用css，尽管我不担心非javascript浏览器