热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

探究HTML5应用中的三种Accordion交互效果

在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。

HTML5应用中accordion三种效果的探索


摘要:Accordion(手风琴,又名"抽屉")效果,因其收展样式形如手风琴而得名。通过层级关系,在信息展示和页面布局上,达到巧妙的平衡。因此,广泛运用于Web以及App交互设计中。在以往的项目中Accordion通常是由Javascript编码实现。本次分享,着重探索两种不依靠JS,采用纯CSS3或HTML5来实现其效果。并对其优缺点作初步的对比。


传统JS实现方式


1、原生Javascript


2、调用JS库文件,jQuery、jQuery Mobile


$'.menu_lev1').clickfunction) {


    var _this=$this),


        _next=_this.next);


    if _next.is':visible')) {


        $'.menu_lev1').removeClass'on');


        $'.menu_lev2').slideUp600);


        _this.addClass'on');


        _next.slideDown600);


    } else {


        _next.slideUp600);


        _this.removeClass'on');


    }


    return true;


});


缺点:效率低,成本高,行为和样式耦合紧密。 


 CSS3 伪类:target


target 是 CSS3 中新增的伪类之一。其能通过锚点,为目标元素添加指定的样式。因其页面中锚点的唯一性,能实现互斥的轮换效果。 


示例代码1:h2一级目录/h2>


ul id="ac1">


      li>二级菜单1/li>


      li>二级菜单2/li>


      li>二级菜单3/li>


 /ul>



ul{ display:none;}


ul:target{display:block;}


示例代码2:c1">一级目录/a>/h2>


ul id="ac1">


      li>二级菜单1/li> 


      li>二级菜单2/li> 


      li>二级菜单3/li>


/ul>


h2>2">一级目录/a>/h2>


ul id="ac2">


      li>二级菜单1/li> 


      li>二级菜单2/li> 


      li>二级菜单3/li>


/ul>


h2>一级目录/a>/h2>


ul id="ac3">


      li>二级菜单1/li> 


      li>二级菜单2/li> 


      li>二级菜单3/li>


/ul>



ul{ display:none;}


ul:target{display:block;}


示例代码3:div id="ac1" >


h2>a >一级目录/a>span>/span>/h2>


ul>


      li>二级菜单1/li>


      li>二级菜单2/li>


/ul>


/div>


div id="ac2" >


          h2>a >一级目录/a>span>/span>/h2>


          ul>


               li>二级菜单1/li>


               li>二级菜单2/li>


          /ul>


/div>


div id="ac3" >


          h2>a 3">一级目录/a>span>/span>/h2>


          ul>


               li>二级菜单1/li>


               li>二级菜单2/li>


          /ul>


/div>



ul{-webkit-transition:all ease 1s; } 


div:target ul{height:400px;}


div:target span{-webkit-transform:rotate90deg);}


Css3 伪类:targetl 缺点:1、不具有二元性。2、过渡动画高度不可自动获取。


HTML5 标签 summary & details


summary & details是HTML5中两个新标签,除了具有很强的语义化之外,它还有令人惊喜的动态效果。因此,抓住这一特性,我们也能很容易的制作出轻量级的手风琴效果来。一般来讲,应该成对使用这两个标签。


 示例代码1:details>


       summary>一级目录/summary>  


       ul>


            li>二级菜单/li>


            li>二级菜单/li>


            li>二级菜单/li>


       /ul> 


/details>


默认样式:可以给details添加open属性,使详情默认展开。 该标签目前仅webkit内核支持。


示例代码2:details>


       summary>一级目录/summary>  


       ul>


            li>二级菜单/li>


            li>二级菜单/li>


            li>二级菜单/li>


       /ul> 


      details>


            summary>二级菜单/summary>  


           ul>


               li>三级菜单/li>


               li>三级菜单/li>


               li>三级菜单/li>


           /ul> 


      /details>  


/details>


说明:可以嵌套使用,形成三级活更多级别菜单。


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: "-";}


缺点:1、不具有互斥性。2、目前还不支持过渡动画效果。 


小  结JS实现accordion效果,成本高,效率低,目前而言能实现最为丰富的效果。 CSS3实现accordion效果,成本低,效率高,虽可以实现丰富的动画效果,但不具有二元性。HTML5实现accordion效果,成本低,效率高,但缺乏动画效果,且不具有互斥性。目前支持的浏览器内核有限。


展 望 CSS3 和 HTML5 的引入和发展,某种程度上进一步推进结构,样式,行为三者分离的Web设计的理念。从而减小表现上对JS的依赖,降低网页制作的成本且提高网页运行的效率。 没有理由不期待css3和HTML5不断完善,假以时日能够提供更为强大的功能。


建 议


在含有内容较多的web app中,基于性能优先的原则,适当优雅降级,采用HTML5标签实现Accordion效果。至少Html5doctor作者是比较推崇 Wordpress 中采用的。


转载自:CUBE



推荐阅读
  • 本文深入剖析了jQuery的架构设计与实现原理。jQuery的总体结构采用了一个自执行匿名函数的形式,该函数接收`window`和`undefined`作为参数,并在内部定义了一个局部的jQuery副本,以确保其内部变量和方法不会污染全局命名空间。这种设计不仅提高了代码的封装性和安全性,还使得jQuery能够更好地与其他JavaScript库兼容。通过详细分析这一架构,读者可以更好地理解jQuery的核心机制及其高效运行的原理。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 本文详细解析了如何使用 jQuery 实现一个在浏览器地址栏运行的射击游戏。通过源代码分析,展示了关键的 JavaScript 技术和实现方法,并提供了在线演示链接供读者参考。此外,还介绍了如何在 Visual Studio Code 中进行开发和调试,为开发者提供了实用的技巧和建议。 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • 在Linux环境中,通过编写Shell脚本来实现自定义命令的创建与激活,能够极大地简化服务器上多个子系统的管理操作。例如,通过简单的命令如“tt”,即可快速查看各个应用程序的名称及其运行状态,从而提高系统维护的效率和便捷性。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • 题目:图像处理(HDU1828,计算周长并集,利用线段树与离散化技术进行扫描) ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 深入理解Spark框架:RDD核心概念与操作详解
    RDD是Spark框架的核心计算模型,全称为弹性分布式数据集(Resilient Distributed Dataset)。本文详细解析了RDD的基本概念、特性及其在Spark中的关键操作,包括创建、转换和行动操作等,帮助读者深入理解Spark的工作原理和优化策略。通过具体示例和代码片段,进一步阐述了如何高效利用RDD进行大数据处理。 ... [详细]
  • 今日精选:10款实用的jQuery随机效果插件
    在今天的精选内容中,我们推荐了10款实用的jQuery随机效果插件。这些插件不仅功能强大,而且设计精良,能够为您的网页增添独特的互动体验。从动态图像效果到文本动画,每款插件都提供了丰富的自定义选项,帮助开发者轻松实现创意视觉效果。特别值得一提的是,其中一款插件集成了与Google API的无缝对接,使数据展示更加生动和直观。 ... [详细]
  • 本研究聚焦于利用Java、PHP和Python开发的汽车销售管理系统,旨在为计算机科学专业学生的毕业设计提供参考。项目采用BS架构,结合多种编程语言的优势,实现高效的数据管理和用户交互。该系统不仅涵盖了汽车销售的核心功能,还通过集成先进的技术栈,提升了系统的稳定性和扩展性。 ... [详细]
  • 在Java中,一个类可以实现多个接口,但是否能够继承多个类则存在限制。本文探讨了Java中实现多继承的方法及其局限性,详细分析了通过接口、抽象类和组合等技术手段来模拟多继承的策略,并讨论了这些方法的优势和潜在问题。 ... [详细]
  • 本文深入探讨了Android事件分发机制的源代码,重点分析了DecorView作为Activity根布局的角色及其在事件传递中的作用。同时,详细解析了PhoneWindow在Activity窗口管理中的关键功能,以及它如何与DecorView协同工作,确保用户交互事件的高效处理。 ... [详细]
author-avatar
静2502882443
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有