開閉型カテゴリパーツの親カテゴリをただの見出しっぽくしてみた

商品カテゴリを開閉型カテゴリパーツにした際に親カテゴリをリンク飛ばさずに、子カテゴリを開かなきゃいけない案件があったの対応しました。
需要があるかわかりませんがとりあえずやり方書きます。

サンプル

main.jsに下記スクリプトを追記して親カテゴリのリンクを打ち消します。

$(document).on('click mouseenter mouseleave', '.category_parent a', function(e) {
  var $self = $(e.target);
  if( $('body.mobile').length && $('body.tablet').length ){
    if( $self.hasClass('has_under_arrow') ){
      e.preventDefault();
    }
  }
});

打ち消すと親カテゴリはリンク先には飛びませんがマウスホバー時にリンクの下線が残るので消します。ついでに親カテゴリのどこ押しても子カテゴリが出るようにするscssを追記します

.category_parent{
  li{
    a{
      .has_under_arrow {
        width: 100%;
      }
      &:hover{
        text-decoration:none;
      }
    }
    ul{
      li{
        a{
          .has_under_arrow {
            width: 30% !important;
          }
          &:hover{
            text-decoration:underline !important;
          }
        }
      }
    }
  }
}