创建没有任何id或类的jquery选项卡

Question

我正试图用这种结构创建一个选项卡，但无法完成

这是我的代码，我有相同结构的ui

$('.accoidian_cus_open h3').each(function(i) {
$(this).addClass('naccordion' + (i + 1));
});
$(".accoidian_cus_open h3").nextUntil(".accoidian_cus_open h3", "p").hide();
$(".accoidian_cus_open h3").click(function() {
var nxt = $(this).closest("h3");
// $(this).next
$(this).nextUntil(nxt, "p").show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accoidian_cus_open">
<h3>tab1</h3>
<p>tab1 content</p>
<p>tab1 content</p>
<p>tab1 content</p>
<p>tab1 content</p>
<h3>tab2</h3>
<p>tab1 content</p>
<p>tab1 content</p>
<p>tab1 content</p>
<h3>tab3</h3>
<p>tab1 content</p>
<p>tab1 content</p>
<p>tab1 content</p>
</div>

Answer 1

您可以使用第n个子项来隐藏除第一个之外的所有段落标记，而不是nexttuntil。

然后使用简单的parent和find/next标签以及this在单击时进行隐藏/显示。

$('.accoidian_cus_open h3').each(function(i) {
$(this).addClass('naccordion' + (i + 1));
});
$(".accoidian_cus_open p:nth-child(n+4)").hide();
$(".accoidian_cus_open h3").click(function() {
$(this).parent().find("p").hide();
$(this).next("p").show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accoidian_cus_open">
<h3>tab1</h3>
<p>tab1 content</p>
<h3>tab2</h3>
<p>tab2 content</p>
<h3>tab3</h3>
<p>tab3 content</p>
</div>