2016-05-27 11 views
0

表示ブロックを切り替える場合は、noneにします。トグルクラスと可視性、表示

は、どのように私はこの

$('.exp').on('click', function() { 
"use strict"; 
$(this).toggleClass("plus_sign minus_sign");  
$(this).toggleClass("plus01 minus01"); 
}); 

plus_signとマイナス記号クラスは、それぞれプラスとマイナスを示すために、イメージを持っているんです。クラスが切り替わるときに、クラスがminus_signの場合、マイナス画像を表示します。クラスがplus_signの場合は、プラス画像を表示し、マイナス画像を非表示にします。画像はCSSの背景画像です。

ありがとうございました

+0

ため、ここで私はシンプルなものを作ったあなたのために

$("#clickme").click(function(){ $("#clickme").toggleClass("fa-minus"); }); 

とHTML

<ul class="main-menu"> <li data-ui-sref-active="active" class="cursor-pointer"> <a data-ui-sref="dashboard.campaign" href="#/dashboard/campaign"><i class="fa fa-plus" aria-hidden="true" id="clickme"></i><span>click me </span></a> </li> </ul> 

を確認してくださいしてくださいより具体的に...あなたは正確に何を隠して見せたいですか? – charlietfl

+0

問題はありませんさらに詳しい情報を追加します –

答えて

0

あなたはそれを難し​​くしています。

最初に、すべての.exp要素にプラス記号(デフォルトがプラスを表示する場合)を使用するように設定します。次に、マイナスが表示されるようにクラスを切り替えるクラスを切り替えます。その後、

.exp { 
    background:url(/path/to/plus.gif); 
} 
.hide_plus { 
    background:url(/path/to/minus.gif); 
} 

ところで、あなたはこれらのアイコンのためのスプライトを使用して、より良いオフにしていると:ここではそこにあなたを取得する必要がありますいくつかの簡単なコードは、だ...

$('.exp').on('click', function() { 
    $(this).toggleClass('hide_plus'); 
}); 

あなたのCSSは次のようなものになります背景画像の位置をずらす。または、fontawesomeのようなものを使用してください。

画像がない+/-トグルを持つ大まかなフィドルです。画像を追加することはあまり難しくありません。

https://jsfiddle.net/tycahill/1pwbuvga/

+0

私はそれを試していただきありがとうございます。ヘルプをよろしくお願いします。 –

+0

私はちょうどコンテンツの表示を切り替えるためにフィドルを更新しました。あまりにもきれいではありません - 私はそれを本当に素早く一緒に投げました。 :-) –

+0

あなたからの助けをいただきありがとうございます。私は物事に近づき、より良いコーダーになる方法を理解してくれます.-) –