2012-01-01 76 views
2

所以基本上我剛剛開始使用jQuery和JS,並且遇到了問題。jQuery slideDown和slideUp切換問題

我有一個小菜單,當用戶點擊其中一個鏈接時,內容就會滑落。如果已經有一個盒子打開,它會滑落。

我的問題是,當你點擊相同的鏈接再次關閉它時,它會滑動,但因爲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鏈接。

我確定這個問題很容易回答。我試過使用addClassremoveClass,但似乎無法完全正確。誰能幫忙?

問候,

湯姆·奧克利

回答

0

我會調整你的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使代碼更短。

+2

使用'href'屬性代替你自己的'數據菜單'。那麼沒有JS也是有意義的。 – powerbuoy 2012-01-01 18:23:22

+0

@powerbuoy:是的,你是對的,這是一個好主意。我已經相應地更新了答案。 – 2012-01-01 20:52:17

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/

UPDATE

我只是重讀你的問題並且如果您希望當前下滑的元素在其導航鏈接再次單擊時滑動,則可以將.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/