打开/关闭时我是否将 Unicode 三角形向上/向下指向？

Question

我有以下 HTML：

<div>
    <h1>Click Me! ▼</h1>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

以及以下 jQuery：

    $('div h1').click(function() {

        $(this).next('p').toggleClass('open');

        var $h1 = $(this).find('h1');

        $h1.text($h1.text().includes('▼') ? $h1.text().replace('▼', '▲') : $h1.text().replace('▲', '▼'));

    });

问题：

当

<p>

隐藏时，

<h1>

应该显示“▼”还是“▲”？

当

<p>

“打开”时，我显示“▼”还是“▲”？

片段：

$('div h1').click(function() {

        $(this).next('p').toggleClass('open');

        var $h1 = $('div').find('h1');

        $h1.text($h1.text().includes('▼') ? $h1.text().replace('▼', '▲') : $h1.text().replace('▲', '▼'));

    });

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

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

Answer 1

打开时为

▲

，关闭时为

▼

，因为

▼

表示菜单可以打开，

▲

表示菜单可以关闭。

请参阅此示例：-

关闭：

已打开：