アコーディオンメニューをPCサイズのときだけ解除したい

Question

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');
  }
});

結果はアコーディオンメニューが動かなくなったのと、
縮めたサイズの時にリロードすると、ウインドウ幅を動かすまで、クラスが付与されていないので、
使えませんでした・・・・。

何か良い方法はありませんでしょうか。

Answer 1

解除するというのは、「PCではコンテンツを全表示のままにする」ということでよろしいでしょうか？

$(".ttl").on("click", function() {
	if ($(this).hasClass("sp_ttl")){// SP中だけアコーディオンを動作させる
		$(this).next().slideToggle();
		$(this).toggleClass("active");//矢印用
	}
});

$(window).resize(function(){
	//windowの幅をxに代入
	var x = $(window).width();
	//windowの分岐幅をyに代入
	var y = 768;
	if (x <= y) {
		$('.ttl').addClass('sp_ttl');
		$('.ttl:not(.active)').next().hide();// SPでは.activeではないのを閉じる
	}else{
		$('.ttl').removeClass('sp_ttl');
		$('.ttl').next().show();// PCではコンテンツを全表示
	}
}).trigger('resize');// 設定したresizeメソッドをさっそく呼び出す

.atcitveの解釈がよくわかりませんでした。
$('.ttl.active').next().hide();// SPでは.acttiveなのを閉じる
のほうが適切なのかもしれません。

Comments

[jyoze]

zohnamさん
ありがとうございます！
思った通りに動きました！
jQuery素人のため、一つ一つ調べて意味を理解させていただきます。
.atcitveはアカーディオン時の背景画像の変更用です。
今回の質問とは関係のない記述で申し訳ありませんでした。
本当にありがとうございますm(_ _)m