以下のコードで、
「AAA」クリックで、AAAAAAAAAが表示されます。
「BBB」クリックで、BBBBBBBBBが表示されます。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【サンプル:http://m5011782312.k-free.net】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script>
$(function() {
$('a#show_hide').click(function(event){
event.preventDefault();
$('div#hide').toggle();
});
$('a#show_hide2').click(function(event){
event.preventDefault();
$('div#hide2').toggle();
});
});
</script>
<a href="#" id="show_hide">AAA</a>
<a href="#" id="show_hide2">BBB</a>
<div id="hide" class="hidden" style="display:none">
AAAAAAAAAが表示されます
</div>
<div id="hide2" class="hidden" style="display:none">
BBBBBBBBBが表示されます
</div>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
しかし「AAA」クリック後に「BBB」クリックで両方表示されてしまいます。
これを必ずどちらか一つ表示(Aが出てるときはBを消す逆も然り)にしたいのですが、どう書けばよいかわからず泣いています。
どうか教えてもらえませんでしょうか…(´;ω;`)本当に泣きながらやっています。。
No.1ベストアンサー
- 回答日時:
こんにちは
基本的には、クリックした時にそれ以外の要素を閉じる処理を入れれば良いだけと思います。
ご提示の例では、要素が2個だけですが、同じような動作をするので、個別のIDで識別するよりも共通のクラスとその順番などを利用して処理した方が簡潔に記述できるような気がしますが…
とりあえず、こんな感じではどうでしょうか?
$(function(){
$('#show_hide, #show_hide2').on('click', function(){
var id = this.id.substr(5);
$('#hide, #hide2').each(function(i, e){
if(e.id == id) $(e).slideToggle();
else $(e).slideUp();
});
});
});
>ゆっくりヌルリとアコーディオンのように出るようにとも~
具体的な動作はいろいろ考えられると思いますが、上の例ではslideUp、slideDownの動作にしてあります。
fujillin様!
めちゃくちゃにありがとうございました!!!
徹夜で寝落ちしてました…!(´;ω;`)ウゥゥ
本当に助かりました!!!
No.2
- 回答日時:
こんな感じがいいでしょう
<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#show_hide,#show_hide2').on('click',function(e){
e.preventDefault();
$('#'+$(this).data("target")).siblings('div').hide().end().toggle();
});
});
</script>
<a href="#" id="show_hide" data-target="hide">AAA</a>
<a href="#" id="show_hide2" data-target="hide2">BBB</a>
<a href="#" id="show_hide2" data-target="hide3">CCC</a>
<div id="hide" style="display:none">AAAAAAAAAが表示されます</div>
<div id="hide2" style="display:none">BBBBBBBBBが表示されます</div>
<div id="hide3" style="display:none">CCCCCCCCCが表示されます</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
背景色を透明化
-
タブで開いてさらにタブ内をア...
-
新しいウィンドーでJavascript...
-
IFRAMEの表示/非表示を切り替え...
-
オンマウスで説明文のレイヤー...
-
console.log結果をhtmlで表示し...
-
変数名をどのようにつけるのが...
-
removeEventListenerについて
-
クリックで表示される領域を分...
-
jQueryのアコーディオンメニュ...
-
jqueryを使って無駄なspanタグ...
-
jQueryで同じid属性が複数あっ...
-
ページ読み込み完了の3秒後にリ...
-
javascriptテキストBOX色を元に...
-
iframe内からjQueryで指定したい
-
VBScriptでXMLのデータを取得す...
-
指定位置に要素を追加する
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
背景色を透明化
-
クリックで色変更後に既に変更...
-
前回の質問の続き function mov...
-
読み込んだQRコードをフォーム...
-
IFRAMEの表示/非表示を切り替え...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
変数内容をHTML内で表示する方法
-
VideoBoxのカスタマイズ
-
[急ぎ] videoタグで埋め込んだm...
-
CSSで指定したwidthをマウスで...
-
取得した要素がインライン要素...
-
JAVAスクリプトについて
-
テキストエリア内の一部の文字...
-
jQueryで同じid属性が複数あっ...
おすすめ情報
このようなことができるのであれば別の方法でも構いません。。
納品間近のコーディングで怒られながらやっています…( ノД`)
あとシュピッ!って出るのでなくて、ゆっくりヌルリとアコーディオンのように出るようにとも言われているのですが、この際は贅沢はいいません…、が、合わせてお分かりのようであれば教えてもらえるとさらに泣いて喜びます…!