「ナビゲーションメニュー」ウィジェットの子メニューを折りたたみ表示する方法

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  $(".widget_nav_menu").each(function () {
    // サブメニューを非表示
    $('.sub-menu', this).hide();

    // サブメニューの直前にボタンを追加
    $('.sub-menu', this).before('<div class="nav-menu__toggle"></div>');

    // ボタンクリックの場合
    $('.nav-menu__toggle', this).click(function () {
      // 直後にあるサブメニューの表示を切り替え
      $(this).next('ul').toggle();

      $(this).toggleClass('active');
    });
  });
});

以下のコードをstyle.cssに追加します。

.body .widget_nav_menu {
  ul {
    padding-left: 0;
  }

  li {
    position: relative;
  }

  a {
    padding: 3px 2em 3px 0;
  }

  .nav-menu__toggle {
    border: 1px solid #ccc;
    cursor: pointer;
    display: grid;
    height: 20px;
    place-content: center;
    position: absolute;
    right: 5px;
    top: 8px;
    width: 20px;

    &::before {
      color: #ccc;
      content: '\f078';
      font-family: 'Font Awesome 5 Free';
      font-size: 5px;
      font-weight: bold;
    }

    &.active::before {
      content: '\f077';
    }
  }
}