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; 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) 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; } JS //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:
|
<<: Tutorial on installing MySQL with Docker and implementing remote connection
>>: Three ways to prevent MySQL from inserting duplicate data
What is a directive? Both Angular and Vue have th...
Detailed example of getting the maximum value of ...
Some usage of float Left suspension: float:left; ...
This article shares with you how to use Vue to lo...
What does text-fill-color mean? Just from the lit...
About who Displays users logged into the system. ...
When we write some UI components, if we don't...
First, download the diagram 1. First uninstall th...
Table of contents Preface text 1. Global Registra...
0 Differences between icons and images Icons are ...
Solution to mysql not closing: Right-click on the...
This article shares the specific code for the WeC...
Problem Description I want to use CSS to achieve ...
1. Problem reproduction: Count the total number o...
The use of ElementUI paging component Pagination ...