jQueryでアコーディオンメニューを作成したのですが、
横幅がPCサイズの時はアコーディオンの機能を解除したいです。
下記の書き方では、PCサイズでもアコーディオンが動きます。
$(function(){ $(".ttl").on("click", function() { $(this).next().slideToggle(); $(this).toggleClass("active");//矢印用 }); }); <h3 class="ttl pc">タイトル<span class="icon icon6"></span></h3> <ul class="list"> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> </ul>
そこで、下記のように縮めた時に新しいクラスを付与し、
そのクラスに対してJSを実行しようと考えました。
$(window).resize(function(){ //windowの幅をxに代入 var x = $(window).width(); //windowの分岐幅をyに代入 var y = 768; if (x <= y) { $('.ttl').addClass('sp_ttl'); }else{ $('.ttl').removeClass('sp_ttl'); } });
結果はアコーディオンメニューが動かなくなったのと、
縮めたサイズの時にリロードすると、ウインドウ幅を動かすまで、クラスが付与されていないので、
使えませんでした・・・・。
何か良い方法はありませんでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/10 11:21