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
To split a string into an array, you need to use ...
What are :is and :where? :is() and :where() are p...
This article briefly introduces how to install My...
This article shares the installation steps of MyS...
Preface The CentOS environment variable configura...
/******************** * Character device driver**...
This article mainly records the effect of using j...
During the installation of Ubuntu 18, the mmx64.e...
Preface This article records how I use docker-com...
Preface I believe everyone knows that indexes are...
I recently stumbled upon the Audiovisual Linux Pr...
Table of contents 1. rsync, cp copy files 2. sele...
Table of contents 1. View the storage engine of t...
Problem background: There is a requirement to tak...
1. How to use the link: Copy code The code is as f...