jQuery实现文章的展开与收起的小功能

jQuery实现文章的展开与收起的小功能

css

#detailse {
    height: 350px;
    overflow: hidden;
}

---

html

<div id="detailse">
    <ol>
        <li>li1</li>
        <li>li2</li>
        ...
        <li>li49</li>
        <li>li50</li>
    </ol>
</div>
<p id="expand"><span>∨ 展开</span></p>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    ....
    <li>item99</li>
    <li>item100</li>
</ul>

---

javascript

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $("#expand").on("click", function () {
        //根据描述的高度判断用户想收起还是展开
        if ($("#detailse").css("height") == "350px") {
            //收起时修改提示信息；设置`#detailse`的高度为自适应
            $(this).html("<span>∧ 收起</span>");
            $("#detailse").css("height", "auto");
        } else {
            //收起时修改提示信息；设置将`#detailse`的高度；视口定位到提示信息处
            $(this).html("<span>∨ 展开</span>");
            $("#detailse").css("height", "350px");
            location.href = "#expand";
        }
    })
</script>

注：未贴图、样式简单，只为实现功能；