Exploration of three effects of accordion in HTML5 applications

Exploration of three effects of accordion in HTML5 applications
Abstract: accordion is named after the display style of Accordion, also known as "drawer. The hierarchical relationship achieves a clever balance between information display and page layout. Therefore, it is widely used in Web and App interaction design. In previous projects, Accordion was generally implemented by JavaScript code. In this article, we will focus on the two methods that do not rely on JS and adopt pure CSS3 or HTML5 to achieve their results. And make a preliminary comparison of its advantages and disadvantages. Traditional JS implementation method 1. Native JavaScript 2. Call JS library files, jQuery, jQuery Mobile $ '. menu_lev1 '). clickfunction) {var _ this = $ this), _ next = _ this. next); if _ next. is ': visable') {$ '. menu_lev1 '). removeClass 'on'); $ '. menu_lev2 '). slideUp600); _ this. addClass 'on'); _ next. slideDown600);} else {_ next. slideUp600); _ this. removeClass 'on');} return true;}); disadvantages of code copying: low efficiency, high cost, and tight coupling between behavior and style. CSS3 pseudo class: target is one of the new pseudo classes in CSS3. It can add a specified style for the target element through the anchor. Because of the uniqueness of the anchor on the page, it can achieve mutex rotation. Sample Code 1: h1 Level 1 directory/h1> ul id = "ac1"> li> Level 2 menu 1/li> Level 2 menu 2/li> Level 2 menu 3/li>/ul> copy the code ul {display: none;} ul: target {display: block;} copy the sample code 2: c1 "> Level 1 directory/a>/h1> ul id =" ac1 "> li> Level 2 menu 1/li> Level 2 menu 2/li> Level 2 menu 3/ li>/ul> h1> 2 "> Level 1 directory/a>/h1> ul id =" ac2 "> li> Level 2 menu 1/li> Level 2 menu 2/li> li> Level 2 menu 3/li>/ul> h1> Level 1 directory/a>/h1> ul id = "ac3"> li> Level 2 menu 1/li> Level 2 menu 2/li> Level 2 menu 3/li>/ul> copy the code ul {display: none;} ul: target {display: bloc K;} copy the sample code 3: div id = "ac1"> h1> a> Level 1 directory/a> span>/h1> ul> li> Level 2 menu 1/li> Level 2 menu 2/ li>/ul>/div> div id = "ac2"> h1> a> Level 1 directory/a> span>/h1> ul> li> Level 2 menu 1/ li> Level 2 menu 2/li>/ul>/div> div id = "ac3"> h1> a 3 "> Level 1 directory/a> span>/ h1> ul> li> Level 2 menu 1/li> Level 2 menu 2/li>/ul>/div> copy the code ul {-webkit-transition: all rows 1 s;} div: target ul {height: 400px;} div: target span {-webkit-transform: rotate90deg);} copy code Css3 Pseudo class: targetl disadvantages: 1. Non-dual. 2. the animation height cannot be obtained automatically. The HTML5 tag summary & details is two new tags in HTML5. In addition to strong semantics, it has amazing dynamic effects. Therefore, we can easily create lightweight accordion effects by grasping this feature. Generally, these two labels should be used in pairs. Sample Code 1: details> summary> Level 1 directory/summary> ul> li> Level 2 menu/li> Level 2 menu/li> Level 2 menu/li>/ul>/details> copy code default style: you can add the open attribute to details to show details by default. This label is currently only supported by the webkit kernel. Sample Code 2: details> summary> Level 1 directory/summary> ul> li> Level 2 menu/li> Level 2 menu/li> Level 2 menu/li>/ul> details> summary> Level 2 menu menu/summary> ul> li> Level 3 menu/li> Level 3 menu/li> Level 3 menu/li>/ul>/details> copy Code Description: can be nested to form three levels of live more levels menu. Details summary:-webkit-details-marker {background: red; color: # fff; font-size: 200%;} summary:-webkit-details-marker {display: none} summary: after {content: "+";} details [open] summary: after {content: "-";} copy the code. Disadvantages: 1. No mutual exclusion. 2. Currently, transition animation effects are not supported. Simple JS achieves the accordion effect, with high cost and low efficiency. Currently, it can achieve the most abundant effects. CSS3 achieves the accordion effect with low cost and high efficiency. Although it can achieve a wide range of animation effects, it is not dual. HTML5 achieves the accordion effect with low cost and high efficiency, but lacks the animation effect and is not mutually exclusive. Currently, the supported browser kernels are limited. We hope that the introduction and development of CSS3 and HTML5 will further promote the concept of Web design that separates structure, style, and behavior. This reduces the dependency on JS, reduces the cost of creating web pages, and improves the webpage running efficiency. There is no reason not to expect the continuous improvement of css3 and HTML5, and more powerful functions will be provided in time. It is suggested that in web apps with a large amount of content, the performance-first principle should be used to properly and elegantly degrade the performance, and the HTML5 tag should be used to achieve the Accordion effect. At least the author of Html5doctor prefers Wordpress.