アコーディオンメニューをブラウザー幅で変更したい

質問

下記のように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

SeydaNeen · ベストアンサー

修正済とのこと、了解です。
大したコード量でもありませんので、こちらで動かしてみると、
正常に動いているように、、、見えます。ブラウザ幅を非常に狭めてください。
(Firefox22.0:Linux, IE10:Windows8)
参照URLに載せてますので、ソースも見てください。

参考URL：

http://d0.gotdns.com/accordion.html

お礼

あれこれとお試しいただいてありがとうございました。
サンプルのサイトを拝見した時、その瞬間には動作確認ができませんでした。
しかし幅を狭めた状態で更新したところ、dd部分が閉じられました。
ん？ということは、もしかしてローカルだからこんなことになるのか？
と思って、スマフォで確認したら、問題なく動作しておりました。
やはりローカルだから動作の確認が曖昧だったようです。
うちだけの現象かもしれませんが、
こういうこともあるんだなという勉強になりました。
重ね重ねありがとうございました。

回答No.2

SeydaNeen

下のjsソースではkuchikomiListとなってますが、
<dl id="List">は修正されているでしょうか？

お礼

ご回答ありがとうございました。
指摘の部分、修正済です、すみません。

回答No.1

ORUKA1951

クリックでのopen,closeでなくて良い・・・:hover（マウスオーバー)でよいのでしたらスタイルシートだけで、mediaqueryを併用するのが楽でしょう。

お礼

マウスオーバーではなく、クリックで展開したいと思っています。
ご回答ありがとうございました。