下記のようにHTMLを組んでjQueryを使ってアコーディオンメニューを作りました。
<dl id="List">
<dt>タイトル</dt>
<dd>詳細テキスト</dd>
<dt>タイトル</dt>
<dd>詳細テキスト</dd>
<dt>タイトル</dt>
<dd>詳細テキスト</dd>
</dl>
jQueryは下記の通りで検索して見つけたものを使わせていただきました。
jqueryのバージョンは「1.10.1」。
$(function(){
$('#List dd').hide();
$('#List dt').click(function() {
if($(this).next('dd').is(':visible')) {
$(this).next('dd').slideUp(300);
} else {
$(this).next('dd').slideDown(300).siblings('dd').slideUp(300);
}
});
});
これでdtのタイトルをクリックするとdd部分が表示され、
別のdt部分をクリックすれば、先に開いていたdd部分が隠れて、
クリックしたdtの下部にあるdd部分を表示するというように
問題なく機能してくれました。
これを活かしつつ、レスポンシブのようにしたいなと思ったのです。
仕様としては、パソコンで見る時はdd部分を隠さず表示して、
ブラウザー幅が480pxに以下になったら、
dd部分を隠してアコーディオンとして機能させたい、
と思いました。
プログラムは初心者ゆえ、ライブラリの応用しかできず、
検索で見つけ出したのが下記のようなソースです。
$(function() {
var w = $(window).width();
var x = 480;
if (w <= x) {
}
});
これに上のアコーディオン用のソースを合体させればいけるのではないか?
と漠然と思って(確証がもてるはずもなく…)下記のようにしてみました。
$(function() {
var w = $(window).width();
var x = 480;
if (w <= x) {
$('#kuchikomiList dd').hide();
$('#kuchikomiList dt').click(function() {
if($(this).next('dd').is(':visible')) {
$(this).next('dd').slideUp(300);
} else {
$(this).next('dd').slideDown(300).siblings('dd').slideUp(300);
}
});
}
});
動いてくれそうな気がしたのですが、
全く動いてくれませんでした(涙)
この情報だけを見て、
間違っている箇所がお分かりになる方がいらっしゃいましたら、
ぜひともご教授いただきたいのですが…
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
修正済とのこと、了解です。
大したコード量でもありませんので、こちらで動かしてみると、
正常に動いているように、、、見えます。ブラウザ幅を非常に狭めてください。
(Firefox22.0:Linux, IE10:Windows8)
参照URLに載せてますので、ソースも見てください。
参考URL:http://d0.gotdns.com/accordion.html
あれこれとお試しいただいてありがとうございました。
サンプルのサイトを拝見した時、その瞬間には動作確認ができませんでした。
しかし幅を狭めた状態で更新したところ、dd部分が閉じられました。
ん?ということは、もしかしてローカルだからこんなことになるのか?
と思って、スマフォで確認したら、問題なく動作しておりました。
やはりローカルだから動作の確認が曖昧だったようです。
うちだけの現象かもしれませんが、
こういうこともあるんだなという勉強になりました。
重ね重ねありがとうございました。
No.2
- 回答日時:
下のjsソースではkuchikomiListとなってますが、
<dl id="List">は修正されているでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列の中の各行の要素を...
-
ローディングアニメーションの...
-
このプログラムに、王手をかけ...
-
二次元配列を使って順位をだす...
-
スマホ上で、左右スワイプで次...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
functionはhtmlやjsに2度使えま...
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
-
前回の質問の続き function mou...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
階層別の組織図の自動作成について
-
【JQuery】iframeのリンク先変...
-
Rails3でのクリックされたボタ...
-
jquery.validationEngine.js 添...
-
jQueryの読み込み方
-
jQueryのアコーディオン一番目...
-
JavaScriptでtabindexの変更っ...
-
Javascriptを使ってQRコード読...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
インラインフレームを自動更新...
-
AjaxでJSONを受信すると、文字...
-
変数にドットをいれることはか...
-
パソコンで動くjavascriptがス...
-
JavascriptからPHPへのAjax通信...
-
jQueryでloadした部分に.jsが効...
-
連番タイトル名を基準にリンク...
-
jQueryのblockUIをformのボタン...
-
Selenium Basicの件
-
マスターページ使用時のJavascript
おすすめ情報