【JavaScript】JQueryで開閉メニューを実装したい

Question

前提・実現したいこと

こちらの画像のように「メイン」「各種設定」をクリックしたらしたのメニューが表示される機能をJQueryを用いて実装したいです。
しかし、console.logで確認すればok1~3は表示されるのですが、
肝心の開閉機能が実装されないです。

該当のソースコード

ビューのコードです。

.main_left
    %h3.main_left-head・メイン
    %ul.main_left-list
      %li.hidden
        = link_to 'トップページ', root_path, class: 'leftmenu'
        %br
        = link_to "マイページ", "/users/#{current_user.id}", class: "leftmenu"
        %br
        = link_to '新規投稿', new_note_path, class: "leftmenu"
        %br
        = link_to 'お問い合わせ', '＃', class: 'leftmenu'
    %h3.main_left-head ・各種設定
    %ul.main_left-list
      %li
        = link_to 'ユーザー情報の編集', '＃', class: 'leftmenu'
        %br
        = link_to 'ログアウト', destroy_user_session_path, class: "leftmenu"

JavaScriptのコードです。

$(document).on('turbolinks:load', function() {
  console.log('ok1')
  $(document).ready(function () {
    console.log('ok2')
    $('h3.main_left-head').on('click', function () {
      $(this).next().toggleClass('hidden');
      console.log('ok3')
    });
  });
});

Comments

[yambejp]

hamlの質問でしたらタグがあるので付加したほうがよいでしょう。
みたかんじjQueryにも見えるのですが

Answer 1

原因が断定できないので2つ仮説を立てました。

$(this).next()
が何を表すかというと
.main_left-list(ulタグ)ですね
あなたはliタグにclass名hiddenをつけたり消したりしようとしているようなのでそこで意図しない動きが起きているのか?(だとしてもdisplay:noneなら同じように動くはずだし...違うか?)

ただ画像を見るに初期状態ですべて表示されてることから、
.hiddenになんのプロパティも設定されてないか、タイポが原因でcssが適応されてないか...