アコーディオンメニュー 開いたまま動かない
- アコーディオンメニューを設置したく検索をかけサンプルを入手、手直ししながら設置を試みるのですが、サンプルからして「JavaScriptの記述後 bodyが表示されない」、「親メニューはOKだがサブメニューが開かない」などなど、もう手詰まり状態です。
- 二日かかって下記 URLまでたどり着き正常な位置にきれいに並ぶのですが、私の作っているページ内ではメニューが開いたままの状態です。
- 「DOCTYPE宣言」、「@charset "UTF-8」の違いなどで私のページ（以下に記述）で使うことは無理なのでしょうか、それとも私はまったく勘違いをしているのでしょうか？ アコーディオンメニューを使える道があるならばご教授ください。
- ベストアンサー
アコーディオンメニュー 開いたまま動かない
アコーディオンメニューを設置したく検索をかけサンプルを入手、手直ししながら設置を試みるのですが、サンプルからして「JavaScriptの記述後 bodyが表示されない」、「親メニューはOKだがサブメニューが開かない」などなど、もう手詰まり状態です。 二日かかって下記 URLまでたどり着き正常な位置にきれいに並ぶのですが、私の作っているページ内ではメニューが開いたままの状態です。 http://d.hatena.ne.jp/takahashijunko/20120202/1328189955 「DOCTYPE宣言」、「@charset "UTF-8」の違いなどで私のページ（以下に記述）で使うことは無理なのでしょうか、それとも私はまったく勘違いをしているのでしょうか？ アコーディオンメニューを使える道があるならばご教授ください。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>○○○○○</title> <meta name="description" content="○,○,○,○,"> <meta name="keywords" content="○,○,○,○,,"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style2.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> ・・・・URL先コピペの為省略・・・・ </script> </head> XP Chrom - IE8 - Firefox3.6 にて検証 よろしくお願いします。
- meah1835
- お礼率74% (98/132)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 補足ありがとうございました。 実際に動かしてみましたが、私の環境では動いています。 ソースを見たところ、初期は表示状態でJavaScriptにてページロード後に全て閉じるようにしています。 そこが動いていないようです。 何かJavaScriptのエラーが出たりしていませんか？ js/jquery-1.6.min.jsはきちんと存在していますか？ <script type="text/javascript" src="js/jquery-1.6.min.js"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> に置き換えてみてください。
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 開いたままってことはスタイルが効いていないか、JavaScriptでエラーになっているためだと思います。 提示頂いた部分の差異ではそういった動きになることは考えにくいです。 サンプルをそのまま使っているのであれば、style.cssが読み込めていなかったりなんらかのケアレスミスだと思います。 または現在動いていないものの一式を提示頂ければ具体的なアドバイスが出来るかもしれません。 (HTML,CSS,JavaScript)
お礼
ありがとうございます！ 質問した後ですが、どこが悪いのか bodyの全てを取り払ってみました（補足に記載）がやはり開いたままの状態です。 よろしくご指導ください。
補足
HTML/ JavaScript ---------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>○○○○○</title> <meta name="description" content="○,○,○,○,"> <meta name="keywords" content="○,○,○,○,,"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css" media="screen,print" /> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $("ul.menu").slideUp(); if($("+ul",this).css("display")=="none"){ $("+ul",this).slideDown(); } }); }); </script> </head> <body> <div id="container"> <ul class="navi"> <li> <div class="category">ファッション</div> <ul class="menu"> <li><a href="#">アウター</a></li> <li><a href="#">インナー</a></li> <li><a href="#">ボトム</a></li> <li><a href="#">バッグ</a></li> <li><a href="#">靴</a></li> <li><a href="#">アクセサリー</a></li> </ul> </li> <li> <div class="category">家具・インテリア</div> <ul class="menu"> <li><a href="#">収納家具</a></li> <li><a href="#">ソファ</a></li> <li><a href="#">ベッド</a></li> <li><a href="#">テーブル</a></li> <li><a href="#">チェア</a></li> <li><a href="#">照明</a></li> </ul> </li> <li> <div class="category">ステーショナリー</div> <ul class="menu"> <li><a href="#">ペン・鉛筆</a></li> <li><a href="#">ノート</a></li> <li><a href="#">ファイル</a></li> <li><a href="#">付箋</a></li> </ul> </li> <li> <div class="category">生活雑貨</div> <ul class="menu"> <li><a href="#">キッチン用品</a></li> <li><a href="#">掃除・洗濯用品</a></li> <li><a href="#">バス・トイレ用品</a></li> <li><a href="#">その他</a></li> </ul> </li> </ul> </div> </body> </html> ------------------------ 外部css ------------------------ @charset "Shift_JIS"; body{ background: #fff; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif sans-serif; font-size: 0.875em; color: #164158; } #container { margin: 50px; } ul.navi { width: 220px; margin: 0px; } ul.navi, ul.menu { margin: 0; padding: 0; list-style: none; } div.category { margin: 2px; padding: 0 1em; height: 40px; line-height: 40px; background-color: #B9DDE8; cursor: pointer; } ul.menu a{ display: block; height: 35px; line-height: 35px; color: #164158; padding: 0 1em; } ul.menu li{ background-color: #F2F9FB; } a { text-decoration: none; }
関連するQ&A
- 下記のタグの中で必要ないのはありますか？
(1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
- 締切済み
- HTML
- javespriptについて
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css/top.css"> <title>地球船地球丸プロジェクト</title> <script type="text/javascript"> <!-- for(var i=1;i<=1000,i++){ document.writeln(i+"回目:桑立") } --> </script> </head> <body> </body> </html> と <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css/top.css"> <title>地球船地球丸プロジェクト</title> <script type="text/javascript"> <!-- var ra-men =10; if(ra-men> =60){ alert("合格"); } else{ alert("不合格"); } --> </script> </head> <body> </body> </html> うまくいきません 間違っているのでしょうか
- ベストアンサー
- ブラウザ
- ファイヤーフォックスでCSSが読み込まれません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- ファイヤーフォックスでCSSが機能しません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- XHTMLで外部JSファイルを読み込むには？
XHTMLで外部JSファイルを読み込むには？ よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか？？ アドバイス頂ければ幸いです。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ホームページのヘッダ部分について
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="JA"> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css"> <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="text/javascript"> <TITLE>○○○○</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="css1.css"> <meta name="keywords" content="△,△,△,△,,△,△,"> <meta name="description" content="●●●●●"> </HEAD> <BODY> … となっているのですが、無駄な部分はありますか？ 順番などは合ってますか？ また、こうしたほうがいい、などとアドバイスがあればぜひよろしくお願いいたします。
- 締切済み
- レンタルサーバ・ASP
- headerの添削お願いします。
自分なりに書いてみたのですがおかしいところがあったら教えてください。 また、採点してくれるサイトがあったと思うのですがご存知の方教えてください。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml" xml:lang="ja" lang="ja"> <head> <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="javascript" /> <meta name="keywords" content="content" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="/css/main.css" type="text/css" /> <title>0725</title> </head>
- 締切済み
- HTML
- FirefoxでCSSが読み込めない。
ＨＰを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title></title> </head> <body>
- ベストアンサー
- HTML
- 日本語記述が出来ません（XML?)
初めて質問いたします。 海外のホームページテンプレートを購入し、編集しているのですがなぜか日本語表記がされなくて困っています。 CSS部分には問題なさそうなのですが、誰か原因がわかりましたら教えていただけると助かります。 ちなみにfirefoxもIEも同様でした。どうぞ宜しくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>○○○○</title> <meta http-equiv="Content-Type" content="text/html; charset="shift-jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.2.1.js" type="text/javascript"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script src="js/cufon-replace.js" type="text/javascript"></script> <script src="js/Swis721_Th_BT_400.font.js" type="text/javascript" ></script> <!--[if lt IE 7]> <link href="ie_style.css" rel="stylesheet" type="text/css" /> <![endif]--> </head>
- ベストアンサー
- その他([技術者向] コンピューター)
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
お礼
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> に置き換え ------------- 動きました～、感激です！ これで次に進めます。ほんとにほんとうにありがとうございました。