Question

所以基本上我刚刚开始使用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代码（当然简化）：

    <a id="contact-btn" class="btn-slide" href="#">Contact</a>
    <a id="about-btn" class="btn-slide" href="#">About</a>
    <a id="portfolio-btn" class="btn-slide" href="#">Portfolio</a>

   <div id="contact" class="radius5">Contact Us</div>
   <div id="about" class="radius5">About Us</div>
   <div id="portfolio" class="radius5">Our Portfolio</div>

我还有一个jsFiddle链接。

我确信这很容易回答。我尝试过使用addClass和removeClass，但似乎无法正确使用它。有人可以帮忙吗？

此致

汤姆奥克利

Answer 1

我会略微调整你的HTML以跟踪哪些元素应该使用href属性显示/隐藏（根据@ powerbuoy的评论）：

<a id="contact-btn" class="btn-slide" href="#contact">Contact</a>
<a id="about-btn" class="btn-slide" href="#about">About</a>
<a id="portfolio-btn" class="btn-slide" href="#portfolio">Portfolio</a>

<div id="contact" class="radius5">Contact Us</div>
<div id="about" class="radius5">About Us</div>
<div id="portfolio" class="radius5">Our Portfolio</div>

然后您的JavaScript变得更加简单：

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

示例： http://jsfiddle.net/zLqYn/

您还可以查看slideToggle，但我注意到您使用不同的持续时间取决于您是向上还是向下滑动。如果持续时间相同（例如，您在"slow"的持续时间内上下滑动），则可以使用slideToggle缩短代码。

Answer 2

您需要做的就是从$(".radius5")选项中删除当前元素，这样它就不会滑落。您还可以通过处理一个事件处理程序中的所有click事件来使代码更紧凑：

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

以下是演示：http://jsfiddle.net/ePRsz/5/

<强>更新

我刚刚重新阅读了您的问题，如果您希望当前的滑动元素再次点击导航链接，则可以更改.slideDown()的{{1}}：

.slideToggle()

以下是演示：http://jsfiddle.net/ePRsz/13/

jQuery slideDown和slideUp切换问题

2 个答案: