jQuery slideDown和slideUp切换问题

所以基本上我只是从jQuery和JS开始，我遇到了一个问题

我有一个小菜单，当用户单击其中一个链接时，内容会向下滑动。如果已经有一个盒子打开了，它会向上滑动

我的问题是，当您再次单击同一链接以关闭它时，它会向上滑动，但由于jQuery代码告诉它再次向下滑动，它确实会向上滑动。这意味着，一旦其中一个内容被打开，您就永远无法关闭其中一个

我的jQuery代码是：

jQuery(document).ready(function(){ 

    jQuery(".radius5").hide();

    jQuery("a#contact-btn").click(function() {
        jQuery(".radius5").slideUp();
        jQuery("div#contact").slideDown("slow");
    });

    jQuery("a#about-btn").click(function() {
        jQuery(".radius5").slideUp();
        jQuery("div#about").slideDown("slow"); 
    });

    jQuery("a#portfolio-btn").click(function() {
        jQuery(".radius5").slideUp();
        jQuery("div#portfolio").slideDown("slow-up");
    });

}); 

和HTML代码（当然是简化的）：

联系我们
关于我们
我们的投资组合

我还有一个链接

我相信这很容易回答。我尝试过使用

addClass

和

removeClass

，但似乎没有完全正确。有人能帮忙吗

问候,

---

汤姆·奥克利（Tom Oakley）

我会使用

href

属性（根据@powerboulg的评论）稍微调整您的HTML，以跟踪哪些元素应该显示/隐藏：

示例：

---

你也可以看看，但我注意到，根据你是向上滑动还是向下滑动，你使用的持续时间不同。如果两者的持续时间相同（例如，您以持续时间

“slow”

）上下滑动，您可以通过使用

slideToggle

，，使代码更短。我会稍微调整HTML，使用

href

属性跟踪哪些元素应该显示/隐藏（根据@powerboulg的注释）：

示例：

---

你也可以看看，但我注意到，根据你是向上滑动还是向下滑动，你使用的持续时间不同。如果持续时间相同（例如，您以持续时间

“slow”

）上下滑动），您可以使用

slideToggle

使代码更短，您只需从

$（“.radius5”）

选择中删除当前元素，使其不会向上滑动。您还可以通过在一个事件处理程序中处理所有

单击
事件，使代码更加紧凑：

$(function(){

    //cache the `.radius5` selector so it doesn't have to be re-calculated in the event handler
    var $radius5 = $(".radius5").hide();

    //bind a `click` event handler to all three of your buttons, notice to select multiple items we just put a comma in between the selectors
    $("#contact-btn, #about-btn, #portfolio-btn").click(function() {

        //get the ID of the element to slideDown
        var slide_down = "#" + this.id.replace('-btn', '');

        //slideUp all but the current element
        $radius5.not(slide_down).slideUp();

        //slideDown the current element
        $(slide_down).slideDown("slow");
    });                 
});

下面是一个演示：

更新

我刚刚重新阅读了您的问题，如果您希望当前向下滑动的元素在再次单击导航链接时向上滑动，您可以更改
.slideDown（）
的
.slideToggle（）
：

这里有一个演示：
您所需要做的就是从
$（“.radius5”）
选择中删除当前元素，这样它就不会滑起来。您还可以通过在一个事件处理程序中处理所有
单击
事件，使代码更加紧凑：

$(function(){

    //cache the `.radius5` selector so it doesn't have to be re-calculated in the event handler
    var $radius5 = $(".radius5").hide();

    //bind a `click` event handler to all three of your buttons, notice to select multiple items we just put a comma in between the selectors
    $("#contact-btn, #about-btn, #portfolio-btn").click(function() {

        //get the ID of the element to slideDown
        var slide_down = "#" + this.id.replace('-btn', '');

        //slideUp all but the current element
        $radius5.not(slide_down).slideUp();

        //slideDown the current element
        $(slide_down).slideDown("slow");
    });                 
});

下面是一个演示：

更新

我刚刚重新阅读了您的问题，如果您希望当前向下滑动的元素在再次单击导航链接时向上滑动，您可以更改
.slideDown（）
的
.slideToggle（）
：

这里是一个演示：
使用
href
属性，而不是您自己的
数据菜单
。那么，没有JS也有意义了。@powerbuoy:是的，你说得对，这是个好主意。我已相应地更新了答案。请使用
href
属性，而不是您自己的
数据菜单
。那么，没有JS也有意义了。@powerbuoy:是的，你说得对，这是个好主意。我已经相应地更新了答案。
$(document).ready(function() {

    $(".radius5").hide();

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

        var $menu = $($(this).attr("href"));

        $(".radius5").slideUp();

        if ($menu.is(":hidden")) {
            $menu.slideDown("slow");
        }
    });
});

$(function(){

    //cache the `.radius5` selector so it doesn't have to be re-calculated in the event handler
    var $radius5 = $(".radius5").hide();

    //bind a `click` event handler to all three of your buttons, notice to select multiple items we just put a comma in between the selectors
    $("#contact-btn, #about-btn, #portfolio-btn").click(function() {

        //get the ID of the element to slideDown
        var slide_down = "#" + this.id.replace('-btn', '');

        //slideUp all but the current element
        $radius5.not(slide_down).slideUp();

        //slideDown the current element
        $(slide_down).slideDown("slow");
    });                 
});

$(function(){

    var $radius5 = $(".radius5").hide();

    $("#contact-btn, #about-btn, #portfolio-btn").click(function() {
        var slide_down = "#" + this.id.replace('-btn', '');
        $radius5.not(slide_down).slideUp();
        $(slide_down).slideToggle("slow");
    });                  
});