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

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

另一件事是，如果你希望slideUp（隐藏）效果明显，你应该在其回调中运行slideDown（show）效果。换句话说，您希望在运行另一个动画之前等待一个动画停止。

这是我想出的：

$(".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/

Answer 2

搜索具有活动类的元素并将其删除：

$(document).ready(function(){

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

  });

  $("#resume").click(function(e)
  {
    e.preventDefault();
    $(this).find('li').toggleClass('active');
    $(this).siblings().find(".active").removeClass('active');
    $(".resume").slideToggle("slow");
    $(".about, .portfolio, .contact").slideUp("slow");
  });
});

当我点击链接时显示一个div而隐藏其他div

2 个答案: