人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript jquery toggle について

<div id="title1">title1</div>
<div id="title2">title2</div>
<div id="title3">title3</div>
<div id="data1">data1</div>
<div id="data2">data2</div>
<div id="data3">data3</div>

としてあり、title1をクリックするとdata1を表示するのは下記のようにできますが、

$(function(){
$("#title1").toggle(function(){
$("#data1").slideDown(fast);
},function(){
$("#data1").slideUp(fast);
});
});

では、title1をクリックするとdata1を表示するのと同時に、
data2、data3を $("#data2").slideDown(fast); $("#data3").slideDown(fast); と
同じように(非表示)するにはどう書けばよいのでしょうか。

title1をクリックするとdata1以外のdata2、data3は非表示にし、
title2をクリックするとdata2以外のdata1、data3は非表示にし、
....と言うことがしたいと考えています。

よろしくお願いします。


●質問者: worldtravel
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript jQuery クリック
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● mjy
●35ポイント ベストアンサー

toggle を使う方法はぱっと思い付きません。

単純に網羅的に書くとこんな感じでしょうか。

$(function(){
$("#title1").bind(
"click",
function(){
$("#data1").slideDown("fast");
$("#data2").slideUp("fast");
$("#data3").slideUp("fast");
})
$("#title2").bind(
"click",
function(){
$("#data2").slideDown("fast");
$("#data1").slideUp("fast");
$("#data3").slideUp("fast");
})
$("#title3").bind(
"click",
function(){
$("#data3").slideDown("fast");
$("#data1").slideUp("fast");
$("#data2").slideUp("fast");
})

})

少しだけ汎用的に書くと、こんな感じ。

$(function(){
$("#title1, #title2, #title3").bind(
"click",
function(){
click_id = $(this).attr("id");
click_num = click_id[click_id.length-1];

$("#data1, #data2, #data3").slideUp("fast");
$("#data" + click_num).slideDown("fast");
})
})

◎質問者からの返答

ありがとうございます。

汎用的の方がシンプルで好きです。

すみませんがもう一つ教えて下さい。

既に「slideUp」指定る状態の同じ番号をクリックしたときは

そこが「slideDow」して、全てが「slideDow」した状態にしたいのです。

#title1 をクリックすると #data1 が「slideUp」し、

#data2,#data3 は「slideDow」するのですが、

その状態で #title1 をクリックすると

#data1 が「slideDow」して全てが「slideDow」した状態にしたいのです。

よろしくお願いします。

css のidやclassを色々といじって何とかできました

ありがとうございました。


2 ● mattn
●20ポイント

短時間で書いたのであまりちゃんと確認してませんが...

<html>
<head>
<style>
.data {
 display: none;
 border: 1px solid black;
};
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
 $('.title').click(function() {
 // タイトルのIDから数値を取得
 var ti = this.id.replace('title', '');
 // 広げるデータのIDを取得
 var oi = '#data' + ti;
 // 閉じるデータの一覧を取得
 var ci = [];;
 $('.data').each(function(i, n) {
 var di = this.id.replace('data', '');
 // タイトルの数値とデータの数値が異なれば追加
 if (ti != di) ci.push('#' + this.id);
 });
 // 全てを閉じる
 $(ci.join(',')).slideUp(function() {
 // 閉じられたら一覧から1つ消し0個になったら広げ始める
 ci.pop();
 if (ci.length == 0) $(oi).slideDown();
 });
 })
})
</script>
</head>
<body>
<div class="title" id="title1">title1</div>
<div class="title" id="title2">title2</div>
<div class="title" id="title3">title3</div>
<div class="data" id="data1">data1</div>
<div class="data" id="data2">data2</div>
<div class="data" id="data3">data3</div>
</body>
</html>
◎質問者からの返答

ありがとうございます。

色々と書き方があることが勉強になります。


3 ● Lhankor_Mhy
●30ポイント

ご質問者さまの意図と違うかもしれませんが、HTMLの記述を変えればJavaScriptをシンプルに書くことができます。

http://jsfiddle.net/eSF23/

◎質問者からの返答

ありがとうございます。

意味としてはまさにこうなんですが、

下から上へ伸ばしたいんです...

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ