下記のように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で質問しましょう!
似たような質問が見つかりました
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2023/05/23 16:28
- Access(アクセス) エクセルのVBAについて教えてください。 4 2023/01/21 10:21
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2023/01/23 17:13
- Visual Basic(VBA) ファイル全てを .xlsm に変更したところ、プログラムが途中で落ちてしまっています 17 2022/12/07 12:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューをブラ...
-
jQueryのアコーディオン一番目...
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
jQueryのblockUIをformのボタン...
-
jQueryでxmlの異なるタグ要素を...
-
変数にドットをいれることはか...
-
JavaScriptでtabindexの変更っ...
-
Javascriptの勉強初めました!
-
カンマ区切りのデータを配列に...
-
jQueryで追加した要素がマウス...
-
JSONをperlで受け取る方法
-
Ajax・jQueryでGETとPOSTする方法
-
メールを送信するボタンでOutlo...
-
二つのbxsliderをレスポンシブ...
-
多数のCPUを使い同期処理をした...
-
div要素に枠線を指定とページに...
-
jQueryでloadした部分に.jsが効...
-
エレメントとは何でしょうか
-
ページを遷移せずにデータ送信
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
階層別の組織図の自動作成について
-
jquery.validationEngine.js 添...
-
jquery-1.3.2⇒○ 1.6.4.⇒エラー
-
絞り込み検索の後にソートを追...
-
アコーディオンメニューが他に...
-
Rails3でのクリックされたボタ...
-
jqueryのプラグインについて
-
アコーディオンjquery
-
jqueryについてです
-
【JQuery】iframeのリンク先変...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
Selenium4でボタンをクリックで...
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
カンマ区切りのデータを配列に...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
おすすめ情報