切换多级菜单的效果

Question

网页的演示示例位于：http://osiyo-nur.uz/goodgross/

我有一个包含四个子类别的多级菜单，可以使用幻灯片动画打开。 菜单的打开/关闭工作正常，但我想在第二次点击菜单上添加切换效果。 切换和 ToggleClass 功能无法正常工作。

我怎么能得到这种效果？

P.S。对不起我的英语语法

$('.category>li').click(function(event) {
  $(this).siblings('li').find('.r_div').removeClass('slideRight').find('.cat_3').removeClass('slideRight');
  $(this).find('.r_div').addClass('slideRight');
});
$('.cat_2>li').click(function(event) {
  $(this).siblings('li').find('.cat_3').removeClass('slideRight')
  $(this).find('.cat_3').addClass('slideRight');
});

ul {
  list-style: none;
  position: relative;
  padding: 0;
}

ul.category {
  width: 100px;
}

.category li {
  padding: 5px 0;
  background: #eee;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

.r_div,
.cat_3 {
  position: absolute;
  top: 0;
  width: 0%;
  background: #eee;
  left: 100%;
  border-left: 3px solid #000;
  padding: 0 10px;
  visibility: hidden;
  opacity: 0;
}

.r_div.slideRight,
.cat_3.slideRight {
  visibility: visible;
  width: 100px;
  transition: all .3s linear;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category">
  <li>
    Menu #1
    <div class="r_div">
      <ul class="cat_2">
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
      </ul>

    </div>
  </li>
  <li>
    Menu #2
    <div class="r_div">
      <ul>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #3
    <div class="r_div">
      <ul>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #4
    <div class="r_div">
      <ul>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #5
    <div class="r_div">
      <ul class="cat_2">
        <li>Test5
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test5</li>

        <li>Test5</li>
        <li>Test5</li>
        <li>Test5</li>
      </ul>

    </div>
  </li>
</ul>