使用ul/li实现的手风琴组件添加列表项后功能失效问题求助

问题原因 #

你的手风琴功能失效的核心原因是HTML嵌套不符合规范，浏览器自动篡改了DOM结构导致JS选择器无法匹配到正确元素：
<p> 标签属于段落文本标签，W3C规范中仅允许嵌套行内元素（比如<span>、<a>等），不能嵌套<ul>、<div>这类块级元素。你将<ul>列表放在了class="accordion-panel-ihe"的<p>标签内部，浏览器解析代码时会自动提前闭合<p class="accordion-panel-ihe">，将列表拆分到父级accordion-item-ihe下，导致JS中获取.children(".accordion-panel-ihe")的逻辑找不到正确的内容容器，功能自然失效。

修复方案 #

把所有accordion-panel-ihe对应的容器标签从<p>改为<div>，闭合标签同步修改即可，<div>属于通用容器标签，可正常嵌套任意块级/行内元素，不会出现结构被篡改的问题。你原有的CSS是通过类名绑定样式的，修改标签不会影响样式生效，JS逻辑也不需要做任何改动。

修正后的HTML代码如下：

<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>

内容的提问来源于stack exchange，提问作者SandyS