我有电子商务网站，尝试打开子菜单时，点击父菜单在类别侧栏当父元素（主类别）被点击，我想添加类到子元素（子类别），使子元素显示一些不错的动画。categories menu
当点击下一个主类别时，上一个子类别应隐藏，当前子类别应显示。

<ul class="woo-main-cat">

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
    <ul class="sub-cat-menu">
      <li><a href="http://maincategoreis/sub-categories)</a></li>
    </ul>
</li>

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
    <ul class="sub-cat-menu">
      <li><a href="http://maincategoreis/sub-categories)</a></li>
      <li><a href="http://maincategoreis/sub-categories)</a></li>
    </ul>
</li>

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
    <ul class="sub-cat-menu">
      <li><a href="http://maincategoreis/sub-categories)</a></li>
      <li><a href="http://maincategoreis/sub-categories)</a></li>
    </ul>
</li>

字符串
其中class：woo-main-cat > li保存主类别，class：sub-cat-menu > li保存子类别。当woo-main-cat > li时，单击子目录菜单应显示，当单击下一个主类别时，上一个子类别应关闭。

.sub-cat-menu {

background: #fff;
  visibility: hidden;
  height: 0;
  transition: 0.8s ease-in;
}

.tako-open{
  visibility: visible;
  height: 100%;
}

型
尝试一些动画效果与CSS时，子类别打开和隐藏

$('.woo-main-cat li').on('click', function(){
$(this).children('.sub-cat-menu').addClass('tako-open');
});

型
上面的代码完美地打开了当前的子类别，当点击父类别时，在子元素->子猫菜单上添加tako-open类，但我想在点击下一个父类别时关闭这个打开的子类别。

jQuery(function($) {
$('.woo-main-cat li').on('click', function(){
    $(this).children('.sub-cat-menu').addClass('tako-open');
},function() {
       $(this).children('.sub-cat-menu').removeClass('tako-open');
    });
});

型
所以在添加removeClass代码后，当单击父元素（主类别）时，不会向子元素（子类别）添加任何类