※ ChatGPTを利用し、要約された質問です(原文:jQuery)
jQueryアコーディオン作成手順と問題点
このQ&Aのポイント
サイトの6ページ目でjQueryアコーディオンを作成しましたが、2番目と3番目のdd部分が最初から表示されてしまいます。
作成したサイトのHTMLとCSSの記述は正しいですか?
また、異なるバージョンのjQueryを使用するため、ダウンロードが必要ですか?
http://ascii.jp/elem/000/000/498/498710/
上記サイトの6page目をみて、サイトに手順のあるjQueryアコーディオンを作成しようとおもったのですが、クリックすると2番目と3番目のddの部分が表示されるのですが、私のは最初からddの画像が
3枚とも表示されています。
私の作成したサイトのhtml、cssの記述は以下です。
また、jsフォルダにはjquery.animate-colors-min と jquery.easying.1.3と jquery.skitterと jquery-1.6.3.minが入っていて、jqueryskitterをダウンロードしたときのものです。それが間違いでしょうか?
上記サイトでは他のバージョンを使っているので、それをダウンロードしないとダメなのでしょうか?
<script>の記述が間違っているのでしょうか?
何卒ご教授お願い致します。
○html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>メニューページ</title>
<link href="all.css" rel="stylesheet" type="text/css" media="all" />
<script type="test/javascript" src="js/jquery-1.6.3.min.js"></script>
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
</head>
<body>
<dl>
<dt>course</dt>
<dd>
<p><img src="image/menu1_03.jpg" width="728" height="515" /></p>
</dd>
<dt>a la calt</dt>
<dd>
<p><img src="image/menu2_03.jpg" width="763" height="560" /></p>
</dd>
<dt>waine</dt>
<dd>
<p><img src="image/manu3_03.jpg" width="763" height="561" /></p>
</dd>
</dl>
</body>
</html>
○CSS部分*他のhtmlページともリンクしているため、下記以外にも書いてあります
*{
margin:0;
padding:0;
}
a imag{
border:none;
}
dl{
width:763px;
margin:50px auto;
}
dl dt{
background:#7CADB6;
border-bottom:1px solid #FFFFFF;
cursor:pointer;
}
dl dd{
border:1px solid #7CADB6;
border-top:none;
height:561px;
}
お礼
ご回答ありがとうございました。 今後は注意致します。