JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="Nav" class="accordionPart">
  <li>
    <div class="menu">AA</div>
    <ul class="content sub">
      <li>
        <div class="menu">aa</div>
        <ul class="content ter">
          <li class="content">aaa</li>
          <li class="content">aaa</li>
          <li class="content">aaa</li>
        </ul>
      </li>
      <li>
        <div class="menu">aa</div>
        <ul class="content" class="ter">
          <li class="content">aaa</li>
          <li class="content">aaa</li>
          <li class="content">aaa</li>
        </ul>
      </li>
      <li class="content">第二層之content</li>  
    </ul>
  </li>
 </ul>

CSS

ul, li{
    margin:0;
    padding:0;
    list-style:none;
}

ul#Nav{
    width:197px;
    margin:0 auto;
    background: #313132;
    color: #fdfdfd;
    text-decoration: none;
    display: block;
}

ul#Nav li .menu, ul#Nav li.content {/*第一層menu & 第一層menu之content*/
    padding-left:5px;
    color: #fff;
    cursor: pointer;
    font-size:22px;
}
ul#Nav li ul.sub, ul#Nav li ul.ter {
    margin:6px 0 0;
}
 ul#Nav li ul li .menu, ul#Nav li ul li.content {/*第二層menu & 第二層menu之content*/
    padding-left:15px;
    font-size:18px;
}
ul#Nav li ul li ul li .menu, ul#Nav li ul li ul li.content {/*第三層menu & 第三層menu之content*/
    padding-left:25px;
    font-size:14px;
}
ul#Nav li.content:hover {
    text-decoration: none;
    background:#7ade2a
}
ul#Nav li .menu:hover {
    text-decoration: none;
    background:#7ade2a
}

JavaScript

$(function() {
    $('ul#Nav li div.menu').click(function() {
        $(this).next('ul.content').slideToggle();
    }).siblings('ul.content').hide();
});