開閉型カテゴリパーツの実装

このサイトにあるような
開閉式のカテゴリメニューの実装方法
http://www.takkyutei.com/

sassに追記

どこでもいいが、処理が後半にくるものが好ましい
_custom.scssでよい

.category_child,
.category_g_child {
  display: none;
}
.has_under_arrow {
  height: 27px;
  width: 35px;
  display: inline-block;
  position: absolute;
  right: 0;
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 3px;
    margin: auto;
    width: 6px;
    height: 6px;
    border-top: 1px solid $color_primary;
    border-right: 1px solid $color_primary;
    transform: translate(-50%, -50%) rotate(135deg);
    transition: .2s;
  }
}
.category_navi {
  .has_under_arrow {
    &:after {
      border-color: $category_navi_text;
    }
  }
}
.menu_under_open {
  .has_under_arrow {
    &:after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
}

main.jsに追記

var navi_event = (window._ua.Tablet || window._ua.Mobile)? 'touchend': 'click';
$(document).on(navi_event, '.category_parent a span', function(e) {
  var $self = $(e.target);
  if( $self.hasClass('has_under_arrow') ){
    e.preventDefault();
    var $parent = $self.parent();
    $parent.toggleClass('menu_under_open');
    $parent.next().stop().slideToggle(200);
  }
});