jQuery：嵌套"data-target"函数

Question

这是我的代码：

$("ul li").click(function() {
var target = $($(this).data("target"));
$(".hidden").not(target).removeClass("show");
target.toggleClass("show");
})

* {
cursor: default;
}
li {
cursor: pointer;
}
.hidden {
display: none;
}
.show {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li data-target=".one">Link One</li>
<li data-target=".two">Link Two</li>
<li data-target=".three">Link Three</li>
</ul>
<div class="hidden one">
Lorem Ipsum One
</div>
<ul class="hidden two">
<li data-target=".two_one">Link Two One</li>
<li data-target=".two_two">Link Two Two</li>
</ul>
<div class="hidden two_one">
Lorem Ipsum Two One
</div>
<div class="hidden two_two">
Lorem Ipsum Two Two
</div>
<div class="hidden three">
Lorem Ipsum One
</div>

一般来说，它看起来应该是什么样子但是：如果您单击"；链接二"；然后"；链接二一"；或"；链路二-二"；，第一个导航应该仍然可见。"；链接二一"；或"；链接Two-Two"；应该添加到下面。如果你点击，那么"；链接一"；或"；链路三"；，"；链接二一"；以及"；链接Two-Two"；应该折叠(当然"两个"导航再次隐藏(。

怎么可能做到这一点？我将非常感谢你的帮助！：(

Answer 1

一个选项是使用.not(this.closest('ul'))来避免折叠作为单击元素的父元素的ul：

$("ul li").click(function() {
var target = $($(this).data("target"));
$(".hidden").not(target).not(this.closest('ul')).removeClass("show");
target.toggleClass("show");
})

* {
cursor: default;
}
li {
cursor: pointer;
}
.hidden {
display: none;
}
.show {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li data-target=".one">Link One</li>
<li data-target=".two">Link Two</li>
<li data-target=".three">Link Three</li>
</ul>
<div class="hidden one">
Lorem Ipsum One
</div>
<ul class="hidden two">
<li data-target=".two_one">Link Two One</li>
<li data-target=".two_two">Link Two Two</li>
</ul>
<div class="hidden two_one">
Lorem Ipsum Two One
</div>
<div class="hidden two_two">
Lorem Ipsum Two Two
</div>
<div class="hidden three">
Lorem Ipsum One
</div>