javascript onclick fade div in(短代码)

标签 javascript jquery html toggle fade

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

基本上是html结构。

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

css结构是。

#us {display:none}

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

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

谢谢你的时间

最佳答案

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

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

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

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

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

关于javascript onclick fade div in(短代码),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4317352/

相关文章:

javascript - 抑制浏览器的身份验证对话框

javascript - 如何在 angular.js 中进行自动数据更新?

javascript - 从我的自定义点击处理程序调用默认事件处理程序?

javascript - 循环遍历 jQuery 元素并对它们进行排序,如图所示

c# - 每次访问更改背景图像

c# - 如何在代码隐藏文件中编写 Javascript?

javascript - 如何制作Javascript/HTML,停止并等待用户输入

javascript - 由于javascript冲突无法上传图片

html - 使用 CSS 居中 float 、无宽度的 div

html - 如何使用显示属性(html/php)更改特定元素的可见性