アコーディオンメニューをリンクを使って開閉したい

Question

実現したいこと

テーブル内に含まれた各商品ごとのリンクをクリックすると、下の各商品ごとにわけられたアコーディオンメニューにスライドし、クリックした商品のアコーディオンメニューのみ開く

現状

スライドまではするが、メニューが開かない

jQueryのif文がまちがっているのだと思われますが、どこがまちがっているのかわからず困っています。

参考にしたサイトのURL

http://coolwebwindow.com/jquery-lab/archives/428

ソースコード

HTMLファイル

~
<table>
 <tr>
     <th>
       <img src=“XXXXXXX”>
       <a href=“#apple”>Apple</a>
     </th>
 </tr>
 <tr>
     <th>
       <img src=“XXXXXXX”>
       <a href=“#pen”>Pen</a>
     </th>
 </tr>
</table>

~

<div class=“cost_design” id=“apple”>
 <span>Apple</span>
 <ul class=“inBox”>
   <li>XXXX</li>
   <li>XXXX</li>
   <li>XXXX</li>
 </ul>
</div>
<div class=“cost_design” id=“pen”>
 <span>Pen</span>
 <ul class=“inBox”>
   <li>XXXX</li>
   <li>XXXX</li>
   <li>XXXX</li>
 </ul>
</div>

~~~

<script>
$(function () {
 // #で始まるアンカーをクリックした場合の処理
 $(‘.menu a[href^=#]’).on(‘click’, function() {
   // スクロール設定
   var speed = 400;
   var href = $(this).attr(“href”);
   var target = $(href == “#” ? ‘html’ : href);
   var position = target.offset().top;
   $(‘html, body’).animate({scrollTop:position}, 300, ‘swing’);

   // ターゲット先のメニューが閉じていたら
   if($(href).children(‘.inBox’).css(‘display’) == ‘none’){
     // 開閉イベントの実行
     $(href).children(‘span’).trigger(‘click’);
   }
   return false;
 });

// 開閉のためのクリック処理
 $(‘span’).click(function() {
   // メニューの表示・非表示
   $(this).toggleClass(“clicked”);
   $(this).next(‘ul’).slideToggle(‘fast’);
 });

});
</script>

CSSファイル

.inBox {
 display: none;
list-style: none;
}

Comments

[x_x]

jQueryのバージョンは3.x.xでしょうか？

[gomakichi]

はい。最新のものをいれています

Answer 1

まず、引用符の多くが全角になっているのを直しましょう。'も"もです。
そのうえで省略されている開閉スクリプトがある前提で

 $(document).on('click', '.cost_design > span', function(event) {
   $(this).next().toggle();
 });

ここを直せば動きます。jQuery 2.*までならそのままでも動くようですが

 // #で始まるアンカーをクリックした場合の処理
 //$('.menu a[href^=#]').on('click', function() {
 $('.menu a[href^="#"]').on('click', function() {

Comments

[gomakichi]

回答いただきありがとうございます。
コピー・ペーストした際に記号が変換されたようです。
確認せず貼ってしまい、ご指摘をいただく形となってしまいました。。。すみません。。。

ご教授ありがとうございます。
わたしの書き方は2.Xの書き方になっていたということでしょうか？

[x_x]

参考にしたサイトが古かったようですね。
$('.menu a[href^="#"]')
と省略することなく書けば新旧どちらでも動きます。

[gomakichi]

すみません。間違って上のコメントに返信をしていたので、再度こちらで返信いたします。
返信が遅くなりすみません。ご教授いただいた修正を行いましたが、開閉動作が起きませんでした...。また、開閉処理のコードを追加いたしました。開閉したい部分（span）をクリックし、アコーディオンメニュー（ul）が開く設定を行えばよいわけではないのでしょうか...？

[gomakichi]

こちらのスペルみすでした。。。解決いたしました。ありがとうございいました。

[x_x]

問題はセレクタが認識されていないことなので、開閉処理云々ではありません。
そもそもそこは提示されていなかったので、確認のため補ったまでです。