手风琴函数不能使用ul/li项

Question

当我把内容放到" accordion-panel-ihe"部分，但是当我将列表项放在同一部分时，手风琴停止工作，我已经尝试了列表，并尝试在同一部分使用p标签，但不工作，下面是我手风琴的完整代码，，请检查…谢谢你的提前通知

$(function() {  
$(".accordion-ihe > .accordion-item-ihe.is-active").children(".accordion-panel-ihe").slideDown();

$(".accordion-ihe > .accordion-item-ihe").click(function() {
$(this).siblings(".accordion-item-ihe").removeClass("is-active").children(".accordion-panel-ihe").slideUp();
$(this).toggleClass("is-active").children(".accordion-panel-ihe").slideToggle("ease-out");
});
});

.accordion-ihe {
margin: 1rem 0;
padding: 0;
list-style: none;
}
.accordion-thumb-ihe {
margin: 0;
padding: 0.4rem 0;
cursor: pointer;
font-weight: normal;
color:#009297;
}
.accordion-thumb-ihe::before {
content: "";
display: inline-block;
height: 7px;
width: 7px;
margin-right: 1rem;
margin-left: 0.5rem;
vertical-align: middle;
border-right: 1px solid;
border-bottom: 1px solid;
transform: rotate(-45deg);
transition: transform 0.2s ease-out;
}
.accordion-panel-ihe {
margin: 0;
padding-bottom: 0.8rem;
display: none;
}
.accordion-item-ihe.is-active .accordion-thumb-ihe::before {
transform: rotate(45deg);
}
.accordion-panel-ihe li{
background: url("../images/icon/list-icon.png") no-repeat left 0px top 8px;
padding-left: 2em;
font-size: 1.0em;
line-height: 25px;
color:#009297;
}

<ul class="accordion-ihe">
<li class="accordion-item-ihe is-active">
<p class="accordion-thumb-ihe">Heading</p>
<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li> 
<li>list 4</li>
</ul>
</p>
</li>

<li class="accordion-item-ihe">
<p class="accordion-thumb-ihe">Heading</p>
<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li> 
<li>list 4</li>
</ul>
</p>
</li>

<li class="accordion-item-ihe">
<p class="accordion-thumb-ihe">Heading</p>
<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li> 
<li>list 4</li>
</ul>
</p>
</li>
</ul>

Answer 1

问题是这段代码:

<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</p>

如果你检查渲染的html，你可以看到ul被移出了p，因为那不是有效的html。

所以用这个:

<div class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</div>

你可以在这里阅读更多。

$(function() {
$(".accordion-ihe > .accordion-item-ihe.is-active").children(".accordion-panel-ihe").slideDown();
$(".accordion-ihe > .accordion-item-ihe").click(function() {
$(this).siblings(".accordion-item-ihe").removeClass("is-active").children(".accordion-panel-ihe").slideUp();
$(this).toggleClass("is-active").find(".accordion-panel-ihe").slideToggle("ease-out");
});
});

.accordion-ihe {
margin: 1rem 0;
padding: 0;
list-style: none;
}
.accordion-thumb-ihe {
margin: 0;
padding: 0.4rem 0;
cursor: pointer;
font-weight: normal;
color: #009297;
}
.accordion-thumb-ihe::before {
content: "";
display: inline-block;
height: 7px;
width: 7px;
margin-right: 1rem;
margin-left: 0.5rem;
vertical-align: middle;
border-right: 1px solid;
border-bottom: 1px solid;
transform: rotate(-45deg);
transition: transform 0.2s ease-out;
}
.accordion-panel-ihe {
margin: 0;
padding-bottom: 0.8rem;
display: none;
}
.accordion-item-ihe.is-active .accordion-thumb-ihe::before {
transform: rotate(45deg);
}
.accordion-panel-ihe li {
background: url("../images/icon/list-icon.png") no-repeat left 0px top 8px;
padding-left: 2em;
font-size: 1.0em;
line-height: 25px;
color: #009297;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion-ihe">
<li class="accordion-item-ihe is-active">
<p class="accordion-thumb-ihe">Heading</p>
<div class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</div>
</li>
<li class="accordion-item-ihe">
<p class="accordion-thumb-ihe">Heading</p>
<div class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</div>
</li>
<li class="accordion-item-ihe">
<p class="accordion-thumb-ihe">Heading</p>
<div class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</div>
</li>
</ul>