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は非表示にし、
....と言うことがしたいと考えています。

よろしくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/05/12 18:14:45
  • 終了:2011/05/13 13:19:52

ベストアンサー

id:mjy No.1

mjy回答回数66ベストアンサー獲得回数202011/05/12 21:14:28

ポイント35pt

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");
	})
})

id:worldtravel

ありがとうございます。

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

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

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

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

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

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

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

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

よろしくお願いします。

  • 追記です ---

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

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

2011/05/13 12:32:54

その他の回答(2件)

id:mjy No.1

mjy回答回数66ベストアンサー獲得回数202011/05/12 21:14:28ここでベストアンサー

ポイント35pt

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");
	})
})

id:worldtravel

ありがとうございます。

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

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

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

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

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

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

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

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

よろしくお願いします。

  • 追記です ---

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

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

2011/05/13 12:32:54
id:mattn No.2

mattn回答回数104ベストアンサー獲得回数232011/05/12 21:27:54

ポイント20pt

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

<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>
id:worldtravel

ありがとうございます。

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

2011/05/12 23:06:55
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数775ベストアンサー獲得回数2302011/05/13 09:26:44

ポイント30pt

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

http://jsfiddle.net/eSF23/

id:worldtravel

ありがとうございます。

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

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

2011/05/13 11:08:45
  • id:Lhankor_Mhy
    >意味としてはまさにこうなんですが、
    >下から上へ伸ばしたいんです...
     
     締め切られていたのでコメントに書きますね。
    ↓jQueryUIを使用してます。
    http://jsfiddle.net/eSF23/2/
     本当は全てメソッドチェーンで書けると思うんですが、何故か上手く行かないんですよね…… contextが変わってるのが原因?
  • id:worldtravel
    Lhankor_Mhyさん
    コメントありがとうございます。
    拝見させて頂きました。
    動作も希望通りでした。
    ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません