HTML中折叠展开的实现。

html-css012

HTML中折叠展开的实现。,第1张

<!DOCTYPE HTML>

<html>

<body>

<details>

<summary>Copyright 2011.</summary>

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

</details>

</body>

</html>

放上去的话，用css的hover，先设置默认隐藏

.name{}display:none} .name:hover > .list{display:block}

点击的话，用JQ的click

$(".name").click(function(){

    if($(".name").is(":hidden"))

        $(".name").css("display","block")

    else

        $(".name").css("display","none")

})

如果需要带点动画效果，你就要看看CSS3了........