手风琴菜单箭头transform过渡切换及子链接全区域可点击实现问题

需求1：箭头点击平滑过渡切换 #

实现逻辑： #

给展开状态的.toggle节点新增active类标记，通过transform旋转箭头实现过渡效果，无需更换箭头字符，动画更流畅。

JS代码（全量替换原有JS即可）： #

$('.toggle').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    if ($this.next().hasClass('show')) {
        $this.removeClass('active');
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('.toggle').removeClass('active');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.addClass('active');
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

CSS补充代码（直接添加到原有CSS末尾即可）： #

/* 箭头过渡配置 */
.toggle::before {
  transition: transform 0.3s ease;
  transform-origin: center center;
}
/* 展开状态下箭头旋转90度向下 */
.toggle.active::before {
  transform: rotate(90deg);
}

需求2：子菜单超链接整块可点击 #

实现逻辑： #

移除父级li的内边距，将内边距转移到a标签上，同时把a标签设为块级元素撑满整个容器，保证点击容器任意位置都能触发链接跳转。

CSS补充代码（和上面的CSS代码放在一起即可）： #

/* 整块点击适配 */
.notoggle li {
  padding: 0;
  position: relative;
}
.notoggle li a {
  display: block;
  width: 100%;
  padding: 0.75em 0 0.75em calc(1.3em + 15px);
  box-sizing: border-box;
}
.notoggle li::before {
  position: absolute;
  margin-top: 0.75em;
}

无需修改原有HTML结构，替换上述代码即可实现全部需求。

内容的提问来源于stack exchange，提问作者Midnight