jQuery Toggle（トグル）の2度押し防止！！（点滅を消す方法）
プログラミング
レジットのホームページ大改修にあたって、
サイドバーにブログのランキング表示をすることになりました。
今でも、ブログのランキングは、記事のフッターに表示しているのですが、このランキングをサイドバーに、そして表示方法を「日間」、「週間」、「月間」と3種類のランキングを表示させることになりました。
どうも！！
ホームページの大改修に色々な機能が備わって、中々進みません、ぶっちーです。
誰か【無料】で手伝って下さい。。。。。
早速ですが、今回採用されたサイドバーのランキングのデザインがこちらです。
デザインを見てもらうと「日」、「週」、「月」で分かれてますよね？
クリックすると「日間」、「週間」、「月間」で表示を変える仕様です。
Toggleの点滅を消す方法
元を作成する
まずjQueryのToggle（）を使用し簡単に作成してみました。
応用は、各々お願いします。
※メモ※
Toggle()：各要素のうち、表示状態にあるものを非表示にし、
非表示状態にあるものは表示状態にします。（jQuery日本語リファレンス参照）
.hide()：各要素のうち、表示状態にあるものを非表示にします。
要素が既に非表示になっている場合は何も起こりません。（jQuery日本語リファレンス参照）
まず、htmlがこちら
【HTML】
<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
$(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
$(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
この記事をシェアする
