zoukankan      html  css  js  c++  java
  • HTML 5 <details> 标签

    <details> 标签用于描述文档或文档某个部分的细节。

    <details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>


    与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

    Demo

    To see which browsers currently support this tag go to can I use website.

    Please note at the time of writing this details tag is currently only supported in webkit browsers.

    jQuery Version Of Details Tag

    The problem with HTML5 at the moment is that it's still not fully supported mainly because people are still using out of date browsers such as IE6-8. The details tag is something that is not supported on many browsers so you might want to use the jQuery alternative.

    This feature is something that can easy be done because of the slideToggle() method which you can just apply to the content on the click event of the title.

    For this example we need to change the HTML.

    <div class="jQueryDetailsExample">
    	<h2>Click Here For jQuery Version</h2>
    	<p>This is how it's done using jQuery</p>
    </div>

    We need to add the jQuery so it will do the same as the details tag, therefore we need to start off by hiding the paragraph which is our content so we can toggle the display. Then on the click event of the h2 tag we can toggle the paragraph.

    Copy the following to copy the details functionality in jQuery.

    $(document).ready(function(){
    	$(".jQueryDetailsExample p").hide();
    	
    	$(".jQueryDetailsExample h2").click(function(){
    		$(this).siblings("p").slideToggle();
    	});
    })

    The jQuery example is also on the demo page please visit to see the different between them.

    Demo

    转自:http://www.paulund.co.uk/html5-details-tag

  • 相关阅读:
    第六次作业SSM
    第五次作业——MVC2项目实践
    第四次作业——JSP显示新闻
    第三次作业——servlet应用
    第二次作业——模仿登录页面
    第一次作业——Java web基础
    Alpha项目测试
    作业三
    第二次作业
    第一次阅读作业-201731062609-庞斌
  • 原文地址:https://www.cnblogs.com/youxin/p/3411624.html
Copyright © 2011-2022 走看看