2

所以基本上我刚开始使用 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但似乎无法完全正确。任何人都可以帮忙吗？

问候，

汤姆奥克利

4

2 回答 2

0
于 2012-01-01T17:34:26.377 回答
0

您需要做的就是从$(".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()为.slideToggle()：

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

这是一个演示：http: //jsfiddle.net/ePRsz/13/

于 2012-01-01T17:53:29.920 回答