2

基本的に、私は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 コード (もちろん単純化されています):

    <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リンクもあります。

確かに答えやすいですよね。addClassandを使用してみましremoveClassたが、まったく正しくないようです。誰でも助けることができますか？

よろしく、

トム・オークリー

4

2 に答える 2

0

あなたがする必要があるのは、$(".radius5")選択から現在の要素を削除して、スライドアップしないようにすることだけです。clickすべてのイベントを 1 つのイベント ハンドラーで処理することにより、コードをよりコンパクトにすることもできます。

$(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 に答える
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。

于 2012-01-01T17:34:26.377 に答える