【jQuery】slideUp,slideDownが動かない?

HTML/CSS/JavaScriptを扱っている方の為のコミュニティです。

色んな疑問や質問を皆で解決していきましょう!

※最初はjQuery限定のコミュでしたが、jQueryはJavaScriptのライブラリであり、
また、HTML/CSSも深く関わってくるので全部一つのコミュにまとめました。
フォーラム(掲示板)ルール
一般常識さえ守れば、どんなスレでも立てていただいて構いません。

常識外れの投稿やスレを見つけた場合は、私の判断で削除いたします。

スレ立てるまでもない、簡単な質問は、
「スレ立てるまでもない質問」のスレッドに投稿して下さい。

基本的には、一つの質問につき1つのスレッドを立てていただて構いません^^
返信
アバター
Ciel
記事: 252
登録日時: 8年前

【jQuery】slideUp,slideDownが動かない?

#1

投稿記事 by Ciel » 8年前

ホントに何度も質問すいません。

ここhttp://ascii.jp/elem/000/000/498/498710/index-6.htmlを参考にして、
アコーディオンパネルを作っていたのですが、どうもうまく動きません。

クリックしても、パネルが閉じたり開いたりしてくれないのです。
上記リンクにあるサンプルページのものはクリックしても動くのですが、
自分がローカルで作ったものは動きません。
javascriptはもちろん有効にしてあります。
ソースコードを貼りますので、どこがおかしいか指摘していただけると助かります。

コード:

<html lang="ja">
<head>
<title>jqueryテストページ</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
<script type="text/javascript">google.load("jqueryui","1");</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" rel="stylesheet">
<style type="text/css">
<!--
div.dragresize{
	width:100px;
	height:100px;
	background-color:blue;
}
*{
	margin:0px;
	padding:0px;
}

dl{
	width:300px;
}

dl dt{
	background-color:green;
	border:2px solid blue;
	color:black;
	cursor:pointer;
}
dl dd{
	height:100px;
	background-color:#999999;
	border:2px solid gray;
	border-top:none;
}
-->
</style>

<script type="text/javascript">
<!--
//ドラッグリサイズスクリプト
$(function(){
$("div.dragresize").draggable().resizable();
});


$(function(){
	//まず最初以外は全部閉じる
	$("dd:not(:first)").css("display","none");
	$("dl dt").click(function(){
		//クリックされた次のDD要素が隠れていたら
		if($("+dd",this).css("display")=="none"){
			//まず全部閉じる
			$("dd").slideUp("slow");
			//クリックした次のdd要素だけ表示
			$("+dd",this).slideDown("slow");
		}
	});
});
			
			
//-->
</script>

</head>
<body>
<div class="dragresize">
ドラッグテスト
</div>
<br>


<dl>
<dt>ラルクアンシエル</dt>
<dd>大阪で結成されたバンド</dd>
<dt>hyde</dt>
<dd>ラルクアンシエルのボーカリスト</dd>
<dt>ken</dt>
<dd>ラルクアンシエルのギタリスト</dd>
<dt>tetsuya</dt>
<dd>ラルクアンシエルのベーシストにしてリーダー</dd>
<dt>yukihiro</dt>
<dd>ラルクアンシエルのドラマー</dd>
</dl>

</body>
</html>
最後に編集したユーザー Ciel on 2011年1月14日(金) 20:03 [ 編集 1 回目 ]
oui C'est la Vie♪

アバター
サウス
記事: 78
登録日時: 8年前
住所: 千葉
連絡を取る:

Re: 【質問】slideUp,slideDownが動かない?

#2

投稿記事 by サウス » 8年前

<script type="text/javascript">google.load("jquery","1.4.2");</script>

とすれば動くみたいです。

1.4.3~は仕様が変わっているみたいですね。

1.4.2: .slideDown( [ duration ], [ callback ] )

1.4.3: .slideDown( [ duration ], [ easing ], [ callback ] )

アバター
h2so5
副管理人
記事: 2212
登録日時: 8年前
住所: 東京
連絡を取る:

Re: 【質問】slideUp,slideDownが動かない?

#3

投稿記事 by h2so5 » 8年前

サンプルページとの違いはjqueryのバージョンだけですね。

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【質問】slideUp,slideDownが動かない?

#4

投稿記事 by Ciel » 8年前

>>サウスさん、h2so5さん

ありがとうございます!
バージョンが原因でしたかぁ。。
バージョン修正したら動きました!
次からはバージョンを色々変えて試してみますね。

バージョンが変わるとメソッドの仕様が変わるのはちょっと困りましたねぇ。
当分は今指定したバージョンを直接指定して使っていこうかなと思います!

ありがとうございました!
oui C'est la Vie♪

返信

“HTML/CSS/JavaScript” へ戻る