Shulou(Shulou.com)06/02 Report--

This article mainly explains the "js how to achieve circular list click to expand to close the effect", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "js how to achieve circular list click to expand to close the effect" it!

Html part

{{item.title}} {{item.desc}} expand and close

Css part

.listMain {padding: 30rpx;} .listMain .list {border-bottom: 1rpx solid # ddd; padding: 20rpx 10rpx; position: relative;} .listMain .list .title {font-size: 30rpx; color: # 333; width: 80%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10rpx;} .listMain .list .desc {font-size: 24rpx; color: # 666;} .listMain .list .listn {position: absolute; right 20rpx: Top: 20rpx; color: # 999; font-size: 26rpx;} .show {display: block;} .hide {display: none;}

Data part

List: [{title: 'front-end technology summary', isShow: false, desc: 'html, div+css+js, selector, centring, closure, inheritance, website refactoring, optimization, iteration, box model, BFC, array, deep and shallow copy, local storage, clearing floats, status codes, etc.'}, {title: 'front-end technology framework', isShow: false Desc: 'vue, angular, react, bootstrap, backbone, jquery, lay ui, amaze ui, zepot, ionic, flutter, require, echart, etc.'}, {title: 'front-end technology extension', isShow: false, desc: 'what is front-end? To put it simply, it is the part that deals with more art designers in program development. Or the part of the interface that is shown to most users, the interface can be physical (such as remote control, button patch, etc.) or virtual (such as various windows in the display). In most cases, we use a virtual interface, that is, the part of the monitor that is drawn for us to operate by using the computer graphics function. The advantage of the virtual interface is that the input device is simple (usually a mouse plus a keyboard), and it is flexible and easy to change. If the customer is not satisfied with the interface, it is relatively easy to change. Because it is a virtual graphics, so in theory can be extended arbitrarily, such as two-dimensional graphics can not meet the requirements, but also three-dimensional design.' }, {title: 'back-end technology', isShow: false, desc: 'many people do not pay much attention to the database in the development process, and do not pay much attention to the design of the table structure. Most of them belong to "can be used", but according to the author's nearly 10 years of development experience, as long as you are engaged in the development of Web-related areas, you can not avoid not dealing with databases. In Web development, most functional operations are essentially operations on the database, whether you use Pythod,Java,Ruby and other languages for Web development, you are actually programming for the database'}, {title:'UI designer', isShow: false, desc:'UI, that is, the user interface (User Interface) is the medium for interaction and information exchange between the system and users. In short, UI designers design user interfaces. Generally speaking, the interface of app on our mobile phones is designed by UI designers. Easy to understand, UI is to do the interface, the most important part is the app interface, see all kinds of app in the phone? Most of the things that unfold in front of you are what UI designers need to do. }]

Js Click event

ListBtn (e) {var that = this let index = e.currentTarget.dataset.index let currect = "list [" + index+ "] .isShow" if (that.data.list [index] .isShow = true) {console.log ("Hidden") that.setData ({[currect]: false})} else {console.log ("Show") that.setData ({[ Currect]: true})}}

In some cases, the backend does not send you an isShow, which needs to be manually added by your own js.

The following map and forEach can manually add the isShow field

OnLoad: function () {var that = this let dataList = that.data.list / / dataList.forEach (function (item, index) {/ / dataList [index] .isShow = false / /}) dataList.map ((item, index) = > {dataList [index] .isShow = false}) that.setData ({dataList: dataList})}

2. Circular list, click to expand, and the rest are closed.

The data data and the html and css code are the same as above

ListBtn (e) {let that = this let index = e.currentTarget.dataset.index let dataList = that.data.list dataList [index] .isShow =! dataList [index] .isShow if (dataList [index] .isShow) {that.packUp (dataList,index);} that.setData ({list: dataList}), packUp (data,index) {for (let I = 0, len = data.length; I < len) If +) {data.isShow = false}}

Multi-layer expansion close list

{{parentItem.listName}} close deployment {{item.itemName}} close deployment Content: {{item.content}} time: {{item.time}} page {background: # f3f7f7 List_name_box {background: # fff; border-bottom: 1px solid # efefef; display: flex; height: 90rpx; align-items: center; padding: 025rpx; font-size: 32rpx;} .list_item_name {flex: 1;} .list_item_name_box {background: # fff; font-size: 30rpx; height: 80rpx; display: flex; align-items: center; padding: 0 25rpx 050rpx;} .other {display: flex; height: 80rpx Padding: 0 25rpx 0 50rpx; align-items: center; font-size: 30rpx; color: # 666;} .icon_down_rotate {transform:rotate (180deg) } list: [{listName:' sublist 1, item: [{contents of itemName:' sublist 1-1, content:'1-1', time: '2015-05-06'}, {itemName:' sublist 1-2, contents of content:'1-2', time: '2015-04-13'} {itemName: 'contents of sublist 1-3, content:' 1-3', time: '2015-12-06'}}, {listName: 'listing 2, item: [{itemName:' sublist 2-1, content: contents of'2-1' Time: '2017-05-06'}, {itemName: 'sub-list 2-2, content:' 2-2', time: '2015-08-06'}, {itemName: 'sub-list 2-3', content:'2-3' Time: '2015-11-06'}}, {listName:' listing 3, item: [{itemName: 'sublist 3-1', content:'3-1', time: '2015-05-15'}, {itemName: 'sublist 3-2' Content: 'contents of 3-2', time: '2015-05-24'}, {itemName: 'sublist 1-3', content:'3-3', time: '2015-05-30}]}]

/ / Click the outermost list to expand and put it away.

ListTap (e) {console.log ('triggered outermost'); let Index = e.currentTarget.dataset.parentindex / get the subscript value of the click list=this.data.list; [Index]. Show =! list [Index] .show | false / / change its open and closed status if (list [Index] .show) {/ / if the expanded state is clicked, change the other expanded lists to the folded state this.packUp (list,Index);} this.setData ({list}) }, / / Click on the sublist inside to expand listItemTap (e) {let parentindex = e.currentTarget.dataset.parentindex. Parentindex / the outermost subscript Index=e.currentTarget.dataset.index,// clicked on the inner subscript list=this.data.list; console.log (Index [parentindex] .item, Index); list=this.data.list; console.log [parentindex] .item [Index] .show =! Listparentindex. ItemIndex] .show | | / / change its open and closed state if (list [parentindex]. Item [Index] .show) {/ / if it is the open state of the operation, then make the other lists of the same level closed, leaving only one open for (let I = 0, len = list [parentindex] .item.length; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.