2

それぞれがクリックされたときにコンテンツをスライドさせて表示する必要があるjQueryナビゲーションボタンを利用しているページがあります。ただし、別のボタンをクリックすると、新しいコンテンツが表示される前に、現在表示されているコンテンツが表示されないようにする必要があります。

これは私がこれまでに行ったことです：

$("#rules-btn").click(function () {
    var effect = 'slide';
    var options = { direction: 'left' };
    var duration = 700;
    $('#rules-pane').toggle(effect, options, duration);
});

これが現在どのように機能するかを示す私のjsfiddleです。別のボタンがクリックされたときに現在表示されているコンテンツを非表示にする方法を誰か教えてもらえますか? ありがとう。

ところで、私はjQueryに非常に慣れていません...

4

1 に答える 1

3

デモ: http://jsfiddle.net/e6kaV/6/

HTML:

<div id="rules" class="pane-launcher"></div>
<div id="rules-pane" class="pane"></div>
<div id="scenarios" class="pane-launcher"></div>
<div id="scenarios-pane" class="pane"></div>

JS:

$(".pane-launcher").click(function () {
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'left' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});

CSS:

.pane-launcher{
    position:absolute;
    top: 0;
    width:20px;
    height:20px;
    background-color:#000;
    display:block;
}
#rules {
    left:0px;
}
#scenarios {
    left:40px;
}
.pane{
    position:absolute;    
    left: 0;
    height:50px;
    display:none;
    opacity:0.5;
}
#rules-pane {
    top:50px;
    width:200px;
    background-color:#999;
}

#scenarios-pane {
    top:60px;
    width:170px;
    background-color:#F00;
}

覚えておいてください: 多くの ID を扱うよりも、スタイルとイベント ハンドラーの両方を追加するためにクラスを使用する方が良いでしょう。

于 2013-08-06T19:50:05.243 に答える