4

さまざまなリンクをクリックして、さまざまな div をスライドダウンする機能を作成しました。以下は基本的なコードです。ただし、たとえば、最初のリンクをクリックすると、div が下にスライドするなど、少し問題があります。次のリンクをクリックすると、最初の div が保持され、2 番目の div が下にスライドします。ただし、下にスライドしたdivがあり、リンクをクリックすると、前のdivが上にスライドし、新しいdivが下にスライドするようにしたいと考えています。この点であなたの助けに感謝します。ありがとう。

$("a.about").click(function(){
    $("#about").slideDown("slow");
    });

$("a.info").click(function(){
    $("#info").slideDown("slow");
    });

$("a.contact").click(function(){
    $("#contact").slideDown("slow");
    });
4

4 に答える 4

1

スライドしている div が兄弟であり、説明されているようにクラス名と ID が対応している場合、次のようなことができます。

var links = ['a.about','a.info','a.contact','a.etc'];

$( links.join(',') ).click( function(e){
  e.preventDefault();
  $('#' + this.className).siblings().slideUp('slow').end().slideDown('slow');
});

すべてのリンクが何らかのコンテナ内にある場合は、さらに単純化できます。

$('div#nav-container').find('a').click( function(e){...} );
于 2011-01-04T22:14:17.490 に答える
1

jQuery UI accordionを調べてみてください。

于 2011-01-04T21:21:18.610 に答える
1

これは通常、制御したいすべての div にクラスを追加し、クリックするたびにそのクラスを slideUp() することで実行できます。

$('a.xxx').click(function(){
    $('.sliders').slideUp()
    // slide down other div here
});

これにより、実際にはクラス「スライダー」を使用してすべての div が上にスライドしますが、前にクリックした div が上にスライドするように見えます。

于 2011-01-04T21:22:29.220 に答える
0

最も簡単な方法は、上下にスライドさせようとしているすべての要素に追加の一般的なクラス名を付けてから、アンカーのhref属性を使用して実際のアンカーを要素に接続することです。以下の JavaScript の一部 (HTML に変更を加えたもの) は、現在の JavaScript と同じ機能を実行するだけでなく、スライダーを簡単に追加できます。

# the html
<a class='about slide-control' href='#about'>toggle the about section</a>
<a class='info slide-control' href='#info'>toggle the info section</a>
<a class='contact slide-control' href='#contact'>toggle the contact section</a>

<div class='slider' id='about'>
    this is the about section
</div>
<div class='slider' id='info'>
    this is the info section
</div>
<div class='slider' id='contact'>
    this is the contact section
</div>    

# the javascript
$('a.slide-control').click(function() {
    $('div.slider').slideUp();
    var target = $(this).attr('href');
    $(target).slideDown('slow');
});

適切な HTML を追加するだけで、新しいスライダーを追加できます。

<a class='slide-control' href='#new_section'>Tell me more about this new section!</a>

<div class='slider' id='new_section'>
    This is a great paragraph about the new section on our website!
</div>

または、既存のクラスを使用.slideUpして、他の要素のメソッド呼び出しを次の前に追加することもできます.slideDown。

$('a.about').click(function() {
    $("#info").slideUp('slow');
    $("#contact").slideUp('slow');
    $("#about").slideDown('slow');
});

// repeat for each click handler
于 2011-01-04T21:25:11.873 に答える