javascript onclick淡入淡出div(短代码)

Question

我一直在寻找各处,无法找到任何地方.

html结构基本上是.

<ul> 
   <li><a href="">link</a></li>
   <div id="us">hidden info</div>
</ul>

css结构是.

#us {display:none}

我喜欢它,所以当点击"链接"时,div"us"从dipslay改为:none; 显示:阻止,在尽可能少的代码行中优雅地淡入淡出,然后在单击链接时再次切换回显示:隐藏.

我知道有很多东西可以做到这一点,但我真的在寻找代码中的简单性.

谢谢你的时间x

Answer 1

你可以使用 .toggle()持续时间(适用于所有jQuery版本),如下所示:

$("ul li a").click(function() { $("#us").toggle("fast"); });

或者,如果您使用的是jQuery 1.4.4+,请使用 .fadeToggle()如下:

$("ul li a").click(function() { $("#us").fadeToggle(); });

但请注意,a <div>不是一个有效的子级 <ul>,因此它可能会在多个浏览器中意外渲染...最好使用正确的标记.