0

現在、ポートフォリオ Web サイトのナビゲーションに取り組んでおり、toggle()関数に他のプロパティを追加する方法がわかりません。

その基本的には、4 つの可能なオプションを備えたフィルター システムです。..

  • 全て
  • 相互の作用
  • グラフィック
  • オーディオ

ボタンをクリックすると、他のすべてのオプションがフェードアウトし、対応するコンテンツセクションがフェードアウトするようにしたいと思います..

例 - インタラクティブ ボタンをクリックすると、次のようになります。

「すべてが表示されている場合、フェードアウトし、インタラクティブにフェードインします」 + 「グラフィックが表示されている場合、インタラクティブにフェードアウトし、フェードインします」 + 「オーディオが表示されている場合、フェードアウトし、インタラクティブにフェードインします」

ボタンを 1 回クリックするだけですべての拠点をカバーできるように..

ここで、コードに複数の ID を追加しようとしましたが失敗しました。

$(document).ready(function(){
$("#filter-interactive").toggle(function() {
  $("#wrapper-thumbnails-all, #wrapper-thumbnails-graphic, #wrapper-thumbnails-audio").fadeOut(function() { $("#wrapper-thumbnails-interactive").fadeIn(); });
}, function() {
  $("#wrapper-thumbnails-interactive").fadeOut(function() { $("#wrapper-thumbnails-all").fadeIn(); });
  });
});

これは基本的に私の単純化された html 構造です: ALL セクションのみが表示され、他のすべては Display:none に設定されます。

<body>

<div id="wrapper-thumbnails-all">
 Content
</div>

<div id="wrapper-thumbnails-interactive">
 Content
</div>

<div id="wrapper-thumbnails-graphic">
 Content
</div>

<div id="wrapper-thumbnails-audio">
 Content
</div>

</body>
4

1 に答える 1

0

私はchackboxを試してみましたが、これは一例です。あなたが望むものかどうかはわかりませんが、このフィドルを見てください：

フィドル

$('#wrapper-thumbnails-all').fadeIn();

$('input:checkbox').change(function(){

    if ($(this).is(':checked')){
        $('#wrapper-thumbnails-'+$(this).val()).fadeIn();
    }else{
        $('#wrapper-thumbnails-'+$(this).val()).fadeOut();
    }

});
于 2012-06-26T06:08:28.667 に答える