单击时的jQuery淡入淡出元素[关闭]答案

【问题标题】：jQuery fade elements on click [closed]单击时的jQuery淡入淡出元素[关闭]
【发布时间】：2014-12-10 16:14:12
【问题描述】：

我是编程领域的菜鸟，我一直在搞乱 jQuery，我想知道如何实现以下目标：

请看一下，以便您更好地了解我想要达到的目标
这就是我想出的：http://jsfiddle.net/Whok7345/2wddabnx/（下面是sn-p）

$(document).ready(function (e) {
    $("#menu").accordion({
        collapsible: true,
        active: false
    });
    $("#stuff_header").click(function (e) {
        $("#stuff_header_1").fadeOut("slow");
        $("#stuff_header_2").fadeOut("slow");
        $("#stuff_header").click(function (e) {
            $("#stuff_header_1").fadeIn("slow");
            $("#stuff_header_2").fadeIn("slow");
        });
    });

});

<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="menu">
    
<h4 id="stuff_header">stuff</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
    
<h4 id="stuff_header_1">more stuff</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
    
<h4 id="stuff_header_2">JavaScript</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
</div>

点击“stuff”，你会注意到其他两个标题淡出，再次点击它，其他标题淡入。

到目前为止一切都很好，但是当我再次尝试这样做时，其他两个标题会淡入淡出，并且页面加载后立即看到的效果不再发生。

有人可以帮助我随时获得这种效果吗？

【问题讨论】：

您在尝试添加小提琴链接时是否看到警告消息？所以政策是：帖子中没有代码，也没有小提琴链接。请将代码也添加到帖子中。
无法发布代码链接是有原因的。使用 ++ 来解决它是不好的。
请使用集成的sn-p功能代替外部服务。
- 叹息- 尽我所能编辑问题，但你问的并不是你代码中的真正问题。请查看并尝试使其更清晰

标签： jquery

【解决方案1】：

好吧，我想我明白你想要什么了。

您的错误来自您奇怪的回调函数，您在其中定义了另一个回调函数（实际上是创建了一个循环）。

这是一个更正的，应该可以解决问题（参见 sn-p）

$(document).ready(function (e) {
    $("#menu").accordion({
        collapsible: true,
        active: false
    });

    $("#stuff_header").click(function (e) {
        // check if stuff_header_1 is visible or not, and do the wanted transition
        if ($("#stuff_header_1").is(':visible')) { 
            $("#stuff_header_1").fadeOut("slow");
        } else {
            $("#stuff_header_1").fadeIn("slow");
        }

        if ($("#stuff_header_2").is(':visible')) {
            $("#stuff_header_2").fadeOut("slow");
        } else {
            $("#stuff_header_2").fadeIn("slow");
        }
    });


});

<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="menu">
    
<h4 id="stuff_header">stuff</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
    
<h4 id="stuff_header_1">more stuff</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
    
<h4 id="stuff_header_2">JavaScript</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
</div>

注意：我觉得应该有适当的编码方式

【讨论】：