JavaScript to achieve text expansion and collapse effect

The implementation of expanding and collapsing list-style text is for your reference. The specific contents are as follows

need:

1. When the text exceeds the target value, the target value is intercepted, the others are hidden, and the word "Expand" and the drop-down arrow are displayed at the same time;
2. Click "Expand" to display all text, and change to "Collapse" and the pull-up arrow
3. If the text itself does not exceed the target value, just display all the text

I have thought about using CSS to set the number of lines that need to be hidden, or setting the height of the Li tag to be hidden, but neither of them can meet the third requirement above, so I thought of the following method that can be used

Ideas:

1. Initially traverse the elements that need to be expanded and collapsed, hide them if they exceed the target value, and then save the contents of all tags (which will be used when displaying all later)
2. When you click to expand or collapse, match the stored value according to the current content, and then do the corresponding processing and display it.

HTML

<ul class="outList">
        <li>
            <div>No. 5-14</div>
            <ul class="innerList">
                <li class="wordsContent">11111111111111111111111</li>
                <li class="wordsContent">22222222222222222222222</li>
                <li class="wordsContent">33333333333333333333333</li>
            </ul>
        </li>
        <li>
            <div>No. 5-15</div>
            <ul class="innerList">
                <li class="wordsContent">4444</li>
                <li class="wordsContent">55555555555555555555555555</li>
                <li class="wordsContent">6666666666666666666666666</li>
            </ul>
        </li>
</ul>

CSS

ul,li {
   list-style: none;
 }
.innerList>li {
     margin-bottom: 0.2rem;
     border-bottom: 0.01rem solid green;
     box-sizing: border-box;
     padding: 0.2rem 5% 0.7rem 3%;
     position: relative;
     margin-bottom: 0.3rem;
 }
 .open {
     font-size: 0.22rem;
     color: #12309E;
     position: absolute;
     right: 0.2rem;
     bottom: 0.1rem;
     font-weight: bold;
 }
 .close {
     font-size: 0.22rem;
     color: #12309E;
     position: absolute;
     right: 0.2rem;
     bottom: 0.1rem;
     font-weight: bold;
 }

//Expand and collapse the news var objList = $(".wordsContent"); //The li tag elements that need to be expanded and collapsed var maxNum = 5; //The length of the target value var arr = []; //All the texts that need to be expanded and collapsed objList.delegate(".open", "click", function () {
    openClose(true, this)
})
objList.delegate(".close", "click", function () {
    openClose(false, this)
})
// Initialize the package. The purpose of initialization is 1: store the original content of the Li tag; 2: hide the text that exceeds the target value function init(objList, maxNum) {
    objList.each(function (index, item) {
        arr.push($(item_).text())
        if ($(item).text().length > maxNum) {
            $(item).html($(item).text().substr(0, maxNum) + "<span class='open'>Expand<img src='./image/down^.png'/></span>")
        }
    })
}
init(objList, maxNum)

//Encapsulation function for expanding and collapsing openClose(boo, clickObj) {
    var final = '';
    arr.map(function (item, index) {
        if (item.match($(clickObj).parents(".wordsContent").text().substring(0, $(clickObj).parents(".wordsContent").text().length - 2))) {
            final = item
        }
    })
    if (boo) {
        $(clickObj).parents(".wordsContent").html(final + "<span class='close'>收起<img src='./image/up^.png'/></span>")
    } else {
        $(clickObj).parents(".wordsContent").html(final.substr(0, maxNum) + "<span class='open'>Expand<img src='./image/down^.png'/></span>")
    }
}

Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: