简单的JQuery效果不起作用？

Question

StackOverflow的新功能，但我有一个关于jQuery效果的简单问题。

我试图实现一个滑动功能，当单击图标时切换导航栏。但是，它不起作用，我不知道为什么。提前致谢！

HTML：

<div id="navigation"> 
<ul> 
<li><a href="#" id="navbutton"><img src="navbutton.png" style="width: 15px"></a></li> 
<li class="nav">One</li> 
<li class="nav">Two</li> 
<li class="nav">Three</li> 
</ul> 
</div> 

的jQuery：

$(function() { 
    function runEffect() { 
     $("#navigation .nav").toggle("slide", 500); 
    }; 

    $("#navbutton").click(function() { 
     runEffect(); 
    }); 
}); 

Answer 1

变化$("#navigation.nav")到$("#navigation li.nav")和宽松的 “滑动” 方法需要jQuery UI。

jsFiddle example

Answer 2

你的选择是错误的，由#navigation和.nav

$("#navigation .nav").toggle(500); 

之间插入空格使用CSS后代选择要包括你在选项传递作为对象的宽松选项。

$("#navigation .nav").toggle({ easing: 'slide', duration: 500 }); 

然而，由于在另一篇文章指出，缓和功能slide由jQueryUI的提供，swing是jQuery的提供的默认。

这里有一个fiddle

Answer 3

HTML

<div id="navigation"> 
    <ul> 
     <li> 
      <a href="#" id="navbutton"> 
       <img src="~/Content/navlogo.png" onclick="ShowNav();" /> 
      </a> 
     </li> 
     <li class="nav">One</li> 
     <li class="nav">Two</li> 
     <li class="nav">Three</li> 
    </ul> 
</div> 

jQuery的：

function ShowNav() { 
    $("#navigation").slideToggle(500); 
};