タイ研修いってきました

jQuery Toggle(トグル)の2度押し防止!!(点滅を消す方法)

  • このエントリーをはてなブックマークに追加
jQuery Toggle(トグル)の2度押し防止!!(点滅を消す方法)

レジットのホームページ大改修にあたって、
サイドバーにブログのランキング表示をすることになりました。
今でも、ブログのランキングは、記事のフッターに表示しているのですが、このランキングをサイドバーに、そして表示方法を「日間」、「週間」、「月間」と3種類のランキングを表示させることになりました。

 

どうも!!
ホームページの大改修に色々な機能が備わって、中々進みません、ぶっちーです。
誰か【無料】で手伝って下さい。。。。。

 

 

早速ですが、今回採用されたサイドバーのランキングのデザインがこちらです。
デザインを見てもらうと「日」、「週」、「月」で分かれてますよね?
クリックすると「日間」、「週間」、「月間」で表示を変える仕様です。

 

 

Toggleの点滅を消す方法

元を作成する

まずjQueryのToggle()を使用し簡単に作成してみました。
応用は、各々お願いします。

 

※メモ※
Toggle():各要素のうち、表示状態にあるものを非表示にし、
非表示状態にあるものは表示状態にします。(jQuery日本語リファレンス参照)

.hide():各要素のうち、表示状態にあるものを非表示にします。
要素が既に非表示になっている場合は何も起こりません。(jQuery日本語リファレンス参照)

 

まず、htmlがこちら

【HTML】

 

 

はじめに実装したJQueryがこちらのソース
JQuery1

 

出来た!!!
と思ったら、同じ箇所をクリックすると点滅してしまう。。。
最悪だぁ。。。
点滅してしまう動作サンプルはこちら

 

 

 

条件分岐をつける

そこで、既に開いてる場合は、表示しないという条件分岐をつけました!!

 

JQuery2

正常な動作サンプルはこちら

これで、すでに表示されている箇所をクリックしても点滅せずに表示されました!!

 

 

 

まとめ

いかがでしたでしょうか?
一個目の表示方法は、色々なサイトで見つかりますよね!!
でも、点滅を消す方法(2度押し防止)をググっても全然出てこなかったので、今回ブログを書いてみました。

皆さんの参考になれば幸いです。

 

 

 

お願い

ランキングは、Wordpressのプラグイン「Wordpress Popular Posts」を使用して動的に表示する予定です。

 

しかし!!!!!!!!

 

動作サンプルで、ECサイトと表示しているとこがあったと思うのですが、
ここのカテゴリーのslugを取得する方法がわかりません!!

カテゴリーSlugが取得できないと、カテゴリー毎の色の付与が出来ません。

毎日眠れずに悩んでいます。。。
別のプラグインでもいいです。誰か教えて下さい。。。
お願いしますorz

この記事を書いた人

岩渕 裕WEBディレクター/マークアップエンジニア

岩渕裕です。アダ名は、ブチです。安い居酒屋が大好きで、渋谷の「一軒め酒場」か「すみれ」で飲んでます。趣味は、「サマナーズウォー」という携帯ゲームです。携帯は、ゲームをするために持っています。どなたか、サマナーズウォーの友達になって頂けませんか?サマナーズウォーをしながら、安い居酒屋でお酒飲みたいです。お願いします。

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。