Question

我在编程领域是一个noobie并且我一直在搞乱jQuery，我想知道如何实现以下目标：

请注意一下，以便更好地了解我想要达到的目标这就是我提出的问题：http://jsfiddle.net/Whok7345/2wddabnx/（下面的代码段）

＆＃13;

$(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");
        });
    });

});

＆＃13;

<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>

＆＃13;

点击＆＃34; stuff＆＃34;并且你会注意到其他两个标题淡出，再次点击它，其他标题淡入。

到目前为止一切都很好，但是当我再次尝试这样做时，另外两个标题淡入和淡出，一旦页面加载就看到效果不再发生。

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

Answer 1

好的我觉得我明白了你想要的东西。

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

这是一个更正的，应该做的伎俩（见摘录）

＆＃13;

$(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");
        }
    });


});

＆＃13;

<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>

＆＃13;

注意：我觉得应该有一个正确的方法来编码

点击时jQuery淡化元素

1 个答案: