javascript - 如何按类别选择单击元素的子元素

Question

在我的 html 页面中，有一个所有类别的列表。每个类别都有一些子类别。我希望当单击列表项时，其子类别会被切换，即如果它们可见，则应隐藏它们，反之亦然。同样，在某一时刻，只有一个列表项应该能够显示其子类别。我已经尝试过 this answer ，但这没有帮助。我不介意使用 JS、JQuery 等或完全更改语法。 到目前为止我的工作是

<ul>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 1</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>

    <li class ="outer-list-element">
        <a href="#" class="outer-list">category 3</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>

CSS

li {
    margin-bottom: 8px;
   }
 .inner-list {
    margin-top: 10px;
    display: none;
 }

脚本

$('.outer-list-element').click(function () {
    $(this).children().toggle();
})



$(".outer-list").click(function() {
$(this).siblings('.inner-list').toggle();
return false;
});

随时更新这个 fiddle https://jsfiddle.net/7vmtd2px/1/

Answer 1

请尝试以下代码。

$('.outer-list').click(function () {
   //Hide other ul
   $('ul .inner-list').not($(this).parent('li').find('ul')).hide();
   //Toggle clicked ul
   $(this).parent('li').find('ul').toggle();
});

li {
  margin-bottom: 8px;
}
.inner-list {
  margin-top: 10px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 1</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 2</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#"> sub category 2</a></li>
            </ul>
        </li>
        <li class ="outer-list-element">
            <a href="#" class="outer-list">category 3</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
</ul>