jquery - 单击链接时显示一个 div 而隐藏其他 div

Question

当我点击导航栏链接时，我正在尝试弄清楚如何取消切换(隐藏)所有其他 div。 到目前为止，它会切换 div，但当我单击新链接时它们会保持事件状态。 我希望他们 .slideUp() 和我点击 slideDown 的那个 这是我的代码:

<script type="text/javascript">
$(document).ready(function(){

    $(".output .about , .resume").hide();
    $("#about").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active ');
        $(".about").slideToggle("slow");

    });

    $("#resume").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active');
        $(".output .resume").slideToggle("slow");

    });
});

    <div class="cont2">
        <ul>
            <a href="#" id="about"><li class="fade-in one " >About</li></a>
            <a href="#" id="resume"><li class="fade-in two">Resume</li></a>
            <a href="#"><li class="fade-in three">Portfolio</li></a>
            <a href="#"><li class="fade-in four">Contact</li></a>
        </ul>
    </div>

    <div class="output">
        <div class="about">
            <p>About</p>
        </div>

        <div class="resume">
            <p>Resume</p>
        </div>
    </div>

编辑:正常工作的代码

$(document).ready(function(){

    $(".cont1").hide();
    $(".cont1").fadeIn(1000);
    $(".output .about , .resume").hide();
    $("#about").click(function(e)
    {
        e.preventDefault();
        $(".cont2 li .active").removeClass('active');

        $(this).find('li').toggleClass('active');
        $(".about").slideToggle("slow");
        $(".resume").slideUp("slow");

    });

    $("#resume").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active');
        $(".output .resume").slideToggle("slow");

    });
});

Answer 1

我认为如果您对所有链接只使用一次点击事件会更好。这样你就不必到处复制你的代码了。只需使用 anchor 的 id 并将其与 divs 类(同名)配对即可。您的 HTML 中已经有了它，因此您不必更改它。

另一件事是，如果您希望 slideUp(隐藏)效果引人注目，您应该在其回调中运行 slideDown(显示)效果。换句话说，您希望在运行另一个动画之前等待一个动画停止。

这是我想出的东西:

$(".output .about , .resume").hide();

$("a").click(function (e) {
    e.preventDefault();

    var hiddenDiv = $(".output ." + $(this).attr("id"));
    var visibleDiv = $(".output > div:visible");

    // if all the divs are hidden, just show the desired one
    if (visibleDiv.is(":visible")) {
        visibleDiv.slideUp("slow", function () {
            hiddenDiv.slideDown("slow");
        });
    } else {
        hiddenDiv.slideDown("slow");
    }
});

http://jsfiddle.net/4cvnrh51/