jQueryアコーディオン作成手順と問題点
- サイトの6ページ目でjQueryアコーディオンを作成しましたが、2番目と3番目のdd部分が最初から表示されてしまいます。
- 作成したサイトのHTMLとCSSの記述は正しいですか？
- また、異なるバージョンのjQueryを使用するため、ダウンロードが必要ですか？
- ベストアンサー
ｊQuery
http://ascii.jp/elem/000/000/498/498710/ 上記サイトの6page目をみて、サイトに手順のあるｊQuerｙアコーディオンを作成しようとおもったのですが、クリックすると２番目と3番目のｄｄの部分が表示されるのですが、私のは最初からｄｄの画像が 3枚とも表示されています。 私の作成したサイトのｈｔｍｌ、ｃｓｓの記述は以下です。 また、ｊｓフォルダにはjquery.animate-colors-min と jquery.easying.1.3と jquery.skitterと jquery-1.6.3.minが入っていて、jqueryskitterをダウンロードしたときのものです。それが間違いでしょうか？ 上記サイトでは他のバージョンを使っているので、それをダウンロードしないとダメなのでしょうか？ <script>の記述が間違っているのでしょうか？ 何卒ご教授お願い致します。 ○ｈｔｍｌ部分 <!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; }
- nono1220
- お礼率47% (99/208)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<script type="test/javascript" src="js/jquery-1.6.3.min.js"></script> test/javascriptになってますが、これが原因の一つかもしれません。 text/javascriptです。 直接は関係ありませんが、 a imag{ border:none; } これも imag は img ですね。
関連するQ&A
- JQueryで$("dt span")クリック動作
JQueryで$("dt span")をクリックしたときに 隣接するddタグの部分を表示させるには以下の記述を どのように修正すればよいのでしょうか？ <html> <head> <style type="text/css"> dl { margin-bottom: 20px; } dd { display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("dt span").click(function(){ $("+dd",this).slideToggle(); }); }); </script> </head> <body> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> </body> </html> ご存じの方がおられましたらご回答をよろしくお願いします。
- ベストアンサー
- JavaScript
- 画像の様なテーブルレイアウトにするには？
画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか IE9なら正しく表示されます。 何処を修正したかも教えて下さい ＊＊＊＊＊＊＊＊＊＊＊＊＊＊index.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=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <ul id="products-list"> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：¥200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> </ul> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊base.css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ width:840px; height:380px; margin:10px; padding-left:0; background:#690; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ list-style-type:none; float:left; width:130px; margin:10px 0px 0px 10px; padding:0px; height:170px; background:#F3F59C } .product-img{ margin:0px; padding:0px; width:50px; height:50px; text-align:center; border:none; } #products-list{ margin:0px; padding:0px; }
- 締切済み
- CSS
- 定義リスト dl dd dt
困っています。お願いします。 このソースのレイアウトとしましては、 dl1、dl2、dl3と横に並んでいます。 各dtに画像、ddにテキストです。 このカタチが2行続いています。 3行目は、三列の一番左にdl7が置かれるかたちです。 全体としては、 dl1 dl2 dl3 dl4 dl5 dl6 dl7 という感じです。 dl1～dl7まで全て、同じサイズの画像とddにテキストが入っています。 問題はレイアウトではなく、リンクです。 dl1～dl7のdtの中の画像には全てリンクがはれるのですが、 dd部分の一部テキストにはリンクがはれません。 リンクがはれるのは、dl5、dl6、dl7です。 後はリンクを設定しても、リンクがはれない状態です。 いろいろ試してみたのですが、原因がわかりません。 一つ思うことは、dl1、dl2、dl3、dl4の下にはdl4、dl5、dl6があるわけなので、何か下にあるとリンクが効かないのかなあとも思います。 どなたか、教えて頂きたいです。 分かりづらい説明で申し訳ないのですが、宜しくお願い致します。 <dl id="dl1"> <dt id="dt1"> <a href="#"><img src="img/image1.jpg" /></a> </dt> <dd class="dd1"> <a href="#">ああああ</a> </dd> </dl> <dl id="dl2"> <dt id="dt2"> <a href="#"><img src="img/image1.jpg" /></a> </dt> <dd class="dd1"> <a href="#">いいいい</a> </dd> </dl> このカタチをdl7まで繰り返し、htmlに記述します。 次にcssです。 #dl1 { position: relative; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0px 0px 0px 0px; float: left; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } #dt1 a { display: block; width: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a:hover { background-image: url(img/image1-2.jpg); text-decoration: none; } こちらも同様に、dt7まで繰り返しcssを指定。 cssの中身は、画像にホバーしたら、画像が切り替わるようになっています。 次に、テキストのdd部分のcssです。 こちらはクラス指定で、dl1～dl7までの各dd使用。 .dd1 { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd1 a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd1 a:hover { text-decoration: underline; color: #ffffff; } 長々と失礼いたしました。
- ベストアンサー
- HTML
- ｊQueryでアコーディオンメニュー
質問させてください。 jQueryを使用してアコーディオンメニューを作成しているですが、上手くいきません。 ソースは以下のように記載しました。 (jQuery) <script type="text/javascript"> $(function(){ $("dd:not(:first)").css("display", "none"); $("dl dt").click(function(){ if($("+dd", this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd", this).slideDown("slow"); } }); }); </script> (HTML) <dl> <dt>Step.1.</dt> <dd><p>aaaaa</p></dd> <dt>Step.2.</dt> <dd><p>bbbbb</p></dd> <dt>Step.3.</dt> <dd><p>ccccc</p></dd> </dl> 上記の場合、if()の中の$("+dd", this).css("display")がundefinedになるためチェックが正常に行われません。 どのように修正すればよいのでしょうか。 お手数ですがお知恵をお貸しください。お願いします。
- ベストアンサー
- JavaScript
- jqueryによるアコーディオン表示
http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。 上記サイトのデモではアコーディオンメニューをクリックするとその下に 「アコーディオンメニューが開く」という文字列が表示されます。 しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。 【表示イメージ】 アコーディオンメニュー１ アコーディオンメニュー アコーディオンメニュー２ アコーディオンメニュー アコーディオンメニュー３ アコーディオンメニュー 下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように アコーディオンメニューが表示されますでしょうか。 また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を 改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。 line-height を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更 されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。 【HTML】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#acMenu dt").click(function() { $(this).next().slideToggle(); $(this).toggleClass("active"); }); }); </script> <title>CSS</title> <style type="text/css"> #acMenu dt{ display:block; width:250px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; cursor:pointer; background:url(../images/i_swich.png) 220px -69px no-repeat; padding-right:15px; } #acMenu dd{ background:#f2f2f2; width:250px; height:150px; line-height:50px; text-align:center; border:#666 1px solid; display:none; } #acMenu dt.active{ background:url(../images/i_swich.png) 220px 18px no-repeat; } </style> </head> <body> <dl id="acMenu"> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニュー1が開く。<BR>改行した。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニュー2が開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニュー3が開く。</dd> </dl> </body> </html>
- ベストアンサー
- CSS
- css hover ie6
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。) (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- IE6バグ css hover
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- CSS dtの中に画像を入れた時に
CSS dtの中に画像を入れた時に dtの文字が下にずれてしまいます。 画像を消すと問題無いので、画像の指定に原因があると思うのですが・・・。 ■css ---------------------------------------- .sub{ clear:both; width:420px; } .sub dt{ float:left; padding:0 0 0 0; width:200px; height:38px; line-height:38px; background:url(../img/sub-bg2.jpg) no-repeat; font-size:1em; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } .sub dt img{ padding:0 0 0 0; width:4px; height:38px; } .sub-menu dd{ float:right; width:180px; height:38px; line-height:38px; font-size:1em; background-color:#ffffcc; text-align:right; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } ■html --------------------------------------- <dl class="sub"> <dt><img src="../img/a.png" width="4" height="38" alt="aa" />テキスト</dt> <dd>あいうえお</dd> </dl> お分かりになる方、宜しくお願いします。
- ベストアンサー
- HTML
- jQueryにてアコーディオン機能実装について
皆様、いつもお世話になります。 現在jQueryを使ったアコーディオン機能の実装を勉強しています。 下記、サイトを参考に実装してみたのですが、要望どおりの挙動にならず困っています。 【参考サイト】 http://web-pc.net/jquery010 【質問内容】 ページロード時に、全てのリストが開いてしまっている。 要望する挙動は以下ページのとおり、ページロード時は全てのリストが閉まっている状態にしたい。 http://sample.web-pc.net/accordion/# ソースは以下のとおりです。 【javascript】 <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(".schedule_list dt").click(function(){ $(this).next("dd").slideToggle(); $(this).children("div").toggleClass("open"); }); }); </script> 【HTML】 <div> <dl class="schedule_list"> <dt> <div> <span> <span>★</span> <span>▲▲</span> <span>画像</span> </span> </div> </dt> <dd> <div> <table> <tr> <td> <img src="▲"> </td> <td> <div> <a href=""><img src="▲" /></a> </div> </td> </tr> </table> </div> </dd> </dl> </div> 【CSS】 dl.schedule_list { display:block; } dl.schedule_list dt div { width:546px; height:61px; display:block; background-image:url(★);} dl.schedule_list dt div.open { width:546px; height:61px; display:block; background-image:url(★);} 以上です。 どなたかお詳しい方ご教授のほどよろしくお願いいたします。 開発環境： MacOSX yosemite Dreamweaver CC Safari8.0
- ベストアンサー
- JavaScript
- jqueryについて、$("+dd",this)について教えていただけ
jqueryについて、$("+dd",this)について教えていただけませんでしょうか 【参考サイト】 http://ascii.jp/elem/000/000/498/498710/index-6.html 上記のページのアコーディオンメニューを作る記述において、 $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); の if($("+dd",this).css("display")=="none") の部分の"+dd"に何故、+が付くのでしょうか。 確かに上記の様に記述をすると上手く動作をしますので、正しいのだと 思うのですが、そうなる理由が解らなくて混乱してしまっています。 thisが示す$("dl dt")の下層の要素を指定するための記述ならば、 if($("this dd").css("display")=="none") として、$("dl dt")の下層にあるddという様な指定は出来ないのでしょうか。 まだ、ほとんどjqueryの記述ルールを把握していないので、お恥ずかしいのですが、 何卒、宜しくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございました。 今後は注意致します。