jQuery slideDown and slideUpトグルの問題

Question

基本的に私はjQueryとJSで始まっています。問題にぶつかりました。

ユーザーがリンクの1つをクリックすると小さなコンテンツが表示されます。既にボックスが開いている場合は、それが上にスライドします。

私の問題は、同じリンクをクリックしてもう一度閉じると、スライドアップしますが、jQueryコードが再びスライドするように指示するためです。これは、それらのうちの1つが開いていると、コンテンツのビットを決して閉じることができないことを意味します。

私の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コード（もちろん簡体字）：私もjsFiddleリンクを持っている

<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> 

。

私は本当に答えが簡単だと確信しています。私はaddClassとremoveClassを使ってみましたが、かなり正しいとは思えませんでした。誰も助けることができますか？

よろしく、

トム・オークリー

Answer 1

私は要素が（@のpowerbuoyさんのコメントにつき）hrefプロパティを使用して/非表示を表示するべきかを追跡するために、わずかにあなたのHTMLを微調整します：

<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")の選択肢から現在の要素を削除して、スライドさせないようにするだけです。また、1つのイベントハンドラ内のすべての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

私はちょうどあなたの質問を再読み込みナビゲーションリンクを再度クリックしたときに現在スライドされている要素をスライドさせたい場合は、.slideToggle()の.slideDown()：

$(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/