2017-08-16 11 views
0

Wordpressのページでは、フィルタボタンを使ってそれぞれのカテゴリに応じて投稿の表示をフィルタリングしています。フィルタボタンは、ボタンがリンクされているポストカテゴリに応じてポストの表示をオンまたはオフに切り替える小さなjavascriptを介して機能します。html/javascript:ドロップダウンメニューのトップに戻る/アクティブなフィルタを表示しますか?

今、私はいつもボタンがアクティブになっているフィルタを示すドロップダウンメニューを介して、これらのボタンにアクセスできるようにしたいと思います。それらをドロップダウンメニューに入れることは問題ありませんでした。しかし、次のステップで私はいくつかの助けが必要です:私は、ドロップダウンメニューに、ユーザがクリックしたアクティブなフィルタボタンを常に表示するようにしたいと思います。メニューの上部に表示されます。ページ内のボタンがクリックされる前にページが読み込まれます)。それはどのように可能でしょうか?

ここでポストカテゴリをフィルタリングするフィルタボタンを可能にするドロップダウンメニュー内のフィルタボタンのHTMLだけでなく、JavaScriptのだ:

<div class="dropdown"> 
    <button class="dropbtn">Dropdown Menu Title</button> 

    <div class="dropdown-content"> 
     <button class="btn" id="category-filter1"> Filter 1 </button> 
     <button class="btn" id="category-filter2"> Filter 2 </button> 
     <button class="btn" id="category-filter3"> Filter 3 </button> 
    </div> 
</div> 

Javscript:

<script> 
    var $btns = $('.btn').click(function() { 

     if (this.id == 'all') { 
     $('.projects > .post').fadeIn(300); 
     } else { 
     var $el = $('.' + this.id).fadeIn(300); 
     $('.projects > .post').not($el).fadeOut(300); 
     } 
     $btns.removeClass('active'); 
     $(this).addClass('active'); 
    }) 
</script> 
+0

は、ご希望のメニュー項目にアクティブクラスを設定するためにdocument.readyであなたのスクリプトを実行します。そして、それを行う前に他のメニュー項目 –

+0

ドロップダウンメニューからアクティブなクラスを削除する、それはWordpressを必要とせずに私が見つけることができるjavascriptファイルですか? –

答えて

0

私は思いますあなたはこのを探しています。..

あなたがアクティブリストからテキストを取得し、タイトルのdivやボタンに追加する必要があります。全体のコードの

var textx = $(this).text(); 
$('.dropbtn').text(textx); 

例:https://jsfiddle.net/eh4chb48/

私はypur質問権を得た場合のみ! :);)

関連する問題