折叠面板收起/展开时Unicode三角符号的正确指向

核心结论 #

当<p>处于隐藏状态时，<h1>应该显示▼（向下箭头），这个符号能直观提示用户点击后下方内容会向下展开。

视觉逻辑说明 #

• ▼（向下箭头）：视觉指向下方，明确传递“点击后内容将向下展开”的操作预期，完全匹配<p>隐藏时的交互目标。
• ▲（向上箭头）：则代表“点击后收起已展开内容”，适用于<p>处于显示状态时的提示。

完整实现代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div>
    <h1>Header ▼</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CSS

div, h1, p {
    position: relative;
    display: block;
    float: left;
    width: 200px;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    overflow: hidden;
    box-sizing: border-box;
}
div {
    border:1px solid silver;
}
h1 {
    padding: 10px;
    border-bottom:1px solid silver;
    cursor: pointer
}
h1:hover {
    color: silver;
}
p {
    padding: 0 10px;
    max-height: 0;
    transition: max-height 300ms ease;
}
.open {
    max-height: none;
}

JavaScript

$('div h1').click(function() {
    $(this).next('p').toggleClass('open');
    // 优化：直接使用当前点击的h1元素，避免全局查找
    const $currentH1 = $(this);
    $currentH1.text(
        $currentH1.text().includes('▼') 
            ? $currentH1.text().replace('▼', '▲') 
            : $currentH1.text().replace('▲', '▼')
    );
});

更新确认 #

根据反馈明确交互规则：

• 收起状态（<p>隐藏）：显示▼
• 展开状态（<p>显示）：显示▲

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