javascript onclick fade div in(短代码)

Question

我一直在到处寻找，却找不到我到底在找什么。

基本上是html结构。

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

css结构是。

#us {display:none}

我希望这样，当单击“链接”时，div“我们”从 dipslay:none 更改；以尽可能少的代码行优雅地淡入显示:阻止，然后在单击链接时再次切换回显示:隐藏。

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

谢谢你的时间

Answer 1

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

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

或者，如果您使用的是 jQuery 1.4.4+，请使用 .fadeToggle() 像这样:

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

注意，一个 <div>不是 <ul> 的有效子项，因此它可能会在多个浏览器中意外呈现...最好使用适当的标记。