javascript onclick淡入淡出div（短代码）

我找遍了所有的地方，在任何地方都找不到我想要的东西

html结构基本上是完整的

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

我希望当点击“链接”时，div“us”从dipslay改为：none；要显示：block，请以优雅的淡入方式尽可能少的代码行，然后在单击链接时再次切换回display:hidden

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

感谢您的时间x

您可以只使用一段时间（适用于所有jQuery版本），如下所示：

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

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

$("#idfortheanchor").bind("click", function() {
    if ($("#us").is(":visible")) {
        $("#us").hide();
    } else {
        $("#us").show();
    }
});

或者，如果您使用的是jQuery 1.4.4+，请使用以下命令：

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

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

$("#idfortheanchor").bind("click", function() {
    if ($("#us").is(":visible")) {
        $("#us").hide();
    } else {
        $("#us").show();
    }
});

但是请注意，

不是

的有效子级，因此它可能会在多个浏览器中意外呈现…最好使用适当的标记。

类似以下内容：

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

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

$("#idfortheanchor").bind("click", function() {
    if ($("#us").is(":visible")) {
        $("#us").hide();
    } else {
        $("#us").show();
    }
});

---

由于jQuery核心中没有淡入淡出切换，我将使用：

$('a').toggle(
    function() { $('#us').fadeIn(); },
    function() { $('#us').fadeOut(); }
);

---

如果jQueryUI是您的选择，我只能推荐它。 jQuery UI扩展了jQuery，提供了许多不错的效果：

show( effect, [options], [speed], [callback] )

---

但请查看网站本身：

谢谢大家的意见！你帮了大忙！我认为最合适的最后一个片段来自尼克

$("ul li a").click(function() { $(this).parent().next().toggle("fast"); });

---

再次感谢大家！希望其他人能发现这个有用！x

@AndreKR-yup，iirc补充道：）谢谢你，我试着使用这一个和其他的一样，但是在将它隔离到1个分区时遇到了问题。当我点击切换“我们”时，它也会切换“推特”和“联系人”，即使他们都用自己的id设置。@Owen-id应该是唯一的，你有

id=“我们”吗

在页面中多次？不，每一个都有自己的id（因此它们是唯一的），但它仍然在切换每一个：s非常奇怪的$（文档）。就绪（function（）{$（“ul li a”）。单击（function（）{$（“#contact”）。切换（“fast”）；$（“ul li a”）。单击（function（）{$（“#us”）。切换（“fast”）；}）；是的，但看看所有的好效果！：-）