レジットのホームページ大改修にあたって、
サイドバーにブログのランキング表示をすることになりました。
今でも、ブログのランキングは、記事のフッターに表示しているのですが、このランキングをサイドバーに、そして表示方法を「日間」、「週間」、「月間」と3種類のランキングを表示させることになりました。
どうも！！
ホームページの大改修に色々な機能が備わって、中々進みません、ぶっちーです。
誰か【無料】で手伝って下さい。。。。。
早速ですが、今回採用されたサイドバーのランキングのデザインがこちらです。
デザインを見てもらうと「日」、「週」、「月」で分かれてますよね？
クリックすると「日間」、「週間」、「月間」で表示を変える仕様です。
Toggleの点滅を消す方法
元を作成する
まずjQueryのToggle（）を使用し簡単に作成してみました。
応用は、各々お願いします。
※メモ※
Toggle()：各要素のうち、表示状態にあるものを非表示にし、
非表示状態にあるものは表示状態にします。（jQuery日本語リファレンス参照）
.hide()：各要素のうち、表示状態にあるものを非表示にします。
要素が既に非表示になっている場合は何も起こりません。（jQuery日本語リファレンス参照）
まず、htmlがこちら
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 |
<div class="top-blog-lanking"> <div class="top-side-lanking clearfix"> <i><img src="./img/top/top-side-3-lanking.png"></i> <p>記事ランキング</p> </div> <div class="top-period-lank clearfix"> <ul> <li class="top-period-day"><img src="./img/top/top-side-4-lanking.png"></li> <li class="top-period-weekly"><img src="./img/top/top-side-5-lanking.png"></li> <li class="top-period-month"><img src="./img/top/top-side-6-lanking.png"></li> </ul> </div> <div class="top-lank-list"> <!-- サイドランキング日間 --> <div class="top-period-day-lank"> <ul> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCred">日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプ</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCred">日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプ</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCred">日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプ</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCred">日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプ</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCred">日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプルテキスト日サンプ</span> </p> </div> </li> </ul> </div> <!-- サイドランキング週間 --> <div class="top-period-weekly-lank"> <ul> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCb">週サンプルテキスト週サンプルテキスト週サンプルテキスト週サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCb">週サンプルテキスト週サンプルテキスト週サンプルテキスト週サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCb">週サンプルテキスト週サンプルテキスト週サンプルテキスト週サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCb">週サンプルテキスト週サンプルテキスト週サンプルテキスト週サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCb">週サンプルテキスト週サンプルテキスト週サンプルテキスト週サンプルテキスト</span> </p> </div> </li> </ul> </div> <!-- サイドランキング月間 --> <div class="top-period-month-lank"> <ul> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCgr">月サンプルテキスト月サンプルテキスト月サンプルテキスト月サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCgr">月サンプルテキスト月サンプルテキスト月サンプルテキスト月サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCgr">月サンプルテキスト月サンプルテキスト月サンプルテキスト月サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCgr">月サンプルテキスト月サンプルテキスト月サンプルテキスト月サンプルテキスト</span> </p> </div> </li> <li> <div class="top-period-day-list clearfix"> <div class="period-day-list-left"> <img src="./img/top/top-side-7-lanking.png"> <p>ECサイト</p> </div> <p class="period-day-list-right"> <span class="txtCgr">月サンプルテキスト月サンプルテキスト月サンプルテキスト月サンプルテキスト</span> </p> </div> </li> </ul> </div> <p class="top-side-more-blog"><a href="">もっと見る<i class="fa fa-chevron-circle-right padL10"></i></a></p> </div> </div> |
はじめに実装したJQueryがこちらのソース
JQuery1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(function(){ ////// 日間ランキング ////// // li.top-period-dayをクリックしたら、 $("li.top-period-day").on("click", function() { // div.top-lank-list ulを非表示にして $("div.top-lank-list ul").hide(); // div.top-period-day-lank ulを表示する。 $("div.top-period-day-lank ul").fadeToggle(); }); ////// 週間ランキング ////// // li.top-period-weeklyをクリックしたら、 $("li.top-period-weekly").on("click", function() { // div.top-lank-list ulを非表示にして $("div.top-lank-list ul").hide(); // div.top-period-weekly-lank ulを表示する。 $("div.top-period-weekly-lank ul").fadeToggle(); }); ////// 月間ランキング ////// // li.top-period-monthをクリックしたら、 $("li.top-period-month").on("click", function() { // div.top-lank-list ulを非表示にして $("div.top-lank-list ul").hide(); // div.top-period-month-lank ulを表示する。 $("div.top-period-month-lank ul").fadeToggle(); }); }); |
出来た！！！
と思ったら、同じ箇所をクリックすると点滅してしまう。。。
最悪だぁ。。。
点滅してしまう動作サンプルはこちら
条件分岐をつける
そこで、既に開いてる場合は、表示しないという条件分岐をつけました！！
JQuery2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
$(function(){ // functionを実行する前に、変数宣言をしておく。 // viewDayは真実です。（開いてますよ） var viewDay = true; // viewWeeklyは虚偽です。（開いてないですよ） var viewWeekly = false; // viewMonthは虚偽です。（開いてないですよ） var viewMonth = false; ////// 日間ランキング ////// // li.top-period-dayをクリックしたら、 $("li.top-period-day").on("click", function() { // viewDayがfalse（開いてない）の場合のみ実行する。（条件分岐） if(!viewDay){ // div.top-lank-list ulを非表示にして $("div.top-lank-list ul").hide(); // div.top-period-day-lank ulを表示する。 $("div.top-period-day-lank ul").fadeToggle(); } viewDay = true; viewWeekly = false; viewMonth = false; }); ////// 週間ランキング ////// // li.top-period-weeklyをクリックしたら、 $("li.top-period-weekly").on("click", function() { // viewWeelyがfalse（開いてない）の場合のみ実行する。（条件分岐） if ( !viewWeekly ){ // div.top-lank-list ulを非表示にして $("div.top-lank-list ul").hide(); // div.top-period-weekly-lank ulを表示する。 $("div.top-period-weekly-lank ul").fadeToggle(); } viewWeekly = true; viewDay = false; viewMonth = false; }); ////// 月間ランキング ////// // li.top-period-monthをクリックしたら、 $("li.top-period-month").on("click", function() { // viewMonthがfalse（開いてない）の場合のみ実行する。（条件分岐） if(!viewMonth){ // div.top-lank-list ulを非表示にして $("div.top-lank-list ul").hide(); // div.top-period-month-lank ulを表示する。 $("div.top-period-month-lank ul").fadeToggle(); } viewWeekly = false; viewDay = false; viewMonth = true; }); }); |
これで、すでに表示されている箇所をクリックしても点滅せずに表示されました！！
まとめ
いかがでしたでしょうか？
一個目の表示方法は、色々なサイトで見つかりますよね！！
でも、点滅を消す方法（2度押し防止）をググっても全然出てこなかったので、今回ブログを書いてみました。
皆さんの参考になれば幸いです。
お願い
ランキングは、Wordpressのプラグイン「Wordpress Popular Posts」を使用して動的に表示する予定です。
しかし！！！！！！！！
動作サンプルで、ECサイトと表示しているとこがあったと思うのですが、
ここのカテゴリーのslugを取得する方法がわかりません！！
カテゴリーSlugが取得できないと、カテゴリー毎の色の付与が出来ません。
毎日眠れずに悩んでいます。。。
別のプラグインでもいいです。誰か教えて下さい。。。
お願いしますorz
この記事を書いた人
岩渕 裕プロデューサー
筋トレ、ランニング、料理、ザイグル（家焼き肉）、サイクリング、動画制作が趣味です。健康第一。
WEB制作
ランキング
制作実績
