所以基本上我剛剛開始使用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鏈接。
我確定這個問題很容易回答。我試過使用addClass
和removeClass
,但似乎無法完全正確。誰能幫忙?
問候,
湯姆·奧克利
使用'href'屬性代替你自己的'數據菜單'。那麼沒有JS也是有意義的。 – powerbuoy 2012-01-01 18:23:22
@powerbuoy:是的,你是對的,這是一個好主意。我已經相應地更新了答案。 – 2012-01-01 20:52:17