单击另一个</li> <li>时隐藏一个<li>

Question

我正在使用toggle显示<li>并隐藏其他<li>。

$('.hassub').click(function() {
  $(this).find('ul.hassub1').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mainLi active open"><a href="#" class="pageNav"><i class="fa fa-dashboard"></i>Demo Grp</a>
  <ul style="height:auto;">
    <li class="mainLi hassub"><a href="#" class="pageNav"><i class="fa fa-cogs"></i>Demo SUb Grp2</a>
      <ul class="hassub1" style="margin-top: 1%; display: none;">
        <li><a href=""><i class="fa fa-link fa-cogs"></i>AE_TAT</a></li>
        <li><a href=""><i class="fa fa-link fa-cogs"></i>Agent_Analysis</a></li>
      </ul>
    </li>
    <li class="mainLi hassub"><a href="#" class="pageNav"><i class="fa fa-cogs"></i>Demo Sub Grp</a>
      <ul class="hassub1" style="margin-top: 1%; display: block;">
        <li><a href=""><i class="fa fa-link fa-cogs"></i>AE_CCL_TAT</a></li>
        <li><a href=""><i class="fa fa-link fa-cogs"></i>Customer_Profile_Analysis</a></li>
      </ul>
    </li>
  </ul>
</li>

如果第二次单击不同的li，则需要关闭li

Answer 1

在点击功能上尝试使用此代码：

$(this).siblings().find('.hassub1').hide(); 
$(this).find('ul.hassub1').toggle();