将'animate'添加到jquery下拉菜单

我希望能对此有所帮助。我正在构建一个响应式下拉菜单，根据浏览器窗口大小切换隐藏/可见状态。它基于我在网上找到的jQuery解决方案。将'animate'添加到jquery下拉菜单

在最小（移动）版本。当点击事件被触发时，菜单立即下降，但我真的要添加一个“动画”功能，以便逐渐打开。

对jQuery没有多少经验，我希望有人能够建议我可以在代码中添加'animate'命令的位置。

感谢您的期待。

=========这里是JavaScript：

var ww = document.body.clientWidth; 

$(document).ready(function() { 
    $(".nav li a").each(function() { 
     if ($(this).next().length > 0) { 
      $(this).addClass("parent"); 
     }; 
    }) 

    $(".toggleMenu").click(function(e) { 
     e.preventDefault(); 
     $(this).toggleClass("active"); 
     $(".nav").toggle(); 
    }); 
    adjustMenu(); 
}) 

$(window).bind('resize orientationchange', function() { 
    ww = document.body.clientWidth; 
    adjustMenu(); 
}); 

var adjustMenu = function() { 
    if (ww < 600) { 
     $(".toggleMenu").css("display", "inline-block"); 
     if (!$(".toggleMenu").hasClass("active")) { 
      $(".nav").hide(); 
     } else { 
      $(".nav").show(); 
     } 
     $(".nav li").unbind('mouseenter mouseleave'); 
     $(".nav li a.parent").unbind('click').bind('click', function(e) { 
      // must be attached to anchor element to prevent bubbling 
      e.preventDefault(); 
      $(this).parent("li").toggleClass("hover"); 
     }); 
    } 
    else if (ww >= 600) { 
     $(".toggleMenu").css("display", "none"); 
     $(".nav").show(); 
     $(".nav li").removeClass("hover"); 
     $(".nav li a").unbind('click'); 
     $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { 
      // must be attached to li so that mouseleave is not triggered when hover over submenu 
      $(this).toggleClass('hover'); 
     }); 
    } 
}

=================这里是HTML：

<nav class="main_navigation"> 

     <ul class="nav"> 
      <li><a href="item1.php"><span>Item1</span></a></li> 
      <li><a href="item2.php"><span>Item2</span></a></li> 
      <li><a href="item3.php"><span>Item3</span></a></li> 
      <li><a href="item4.php"><span>Item4</span></a></li> 
      <li><a href="item5.php"><span>Item5</span></a></li> 
     </ul>

来源

2013-02-22 user2099366

，而不是使用jQuery创建一个响应式设计，你看着使用CSS的基础，如骨架？

http://www.getskeleton.com/

做不到这一点，我会建议使用媒体查询修改根据页面大小的资产净值的CSS。在jQuery的方面，你可以使用的slideToggle

来源

2013-02-22 13:34:48

对不起，我回答说，我的手机所以没有很大的空间打字，这里是我最近使用做了类似的事情代码：

<div id="mobile_menu"> 
<p id="mobile_menu_btn">Menu</p> 
<ul id="mobile_menu_ul"> 
<li><a href="exhibitions.html">Exhibitions</a></li> 
<li><a href="artists.html">Artists</a></li> 
<li><a href="news.html">News</a></li> 
<li><a href="services.html">Services</a></li> 
<li><a href="social.html">Social</a></li> 
<li><a href="contact.html">Contact</a></li> 
</ul> 
</div><!-- mobile_menu --> 

$("#mobile_menu_btn").click(function() { 
     $("#mobile_menu_ul").slideToggle('slow', function() { 
    menuDown = true}); 

});

在把它变成你的代码方面，你可以尝试编辑你的，所以它看起来是这样的：

if (!$(".toggleMenu").hasClass("active")) { 
      $(".nav").slideUp('slow'); 
     } else { 
      $(".nav").slideDown('slow'); 
     }

来源

2013-02-22 14:38:02 Alex

将'animate'添加到jquery下拉菜单

回答

相关问题