Jquery菜单动画展示

最新推荐文章于 2024-12-10 12:32:56 发布

最新推荐文章于 2024-12-10 12:32:56 发布 · 146 阅读

文章标签：

#jQuery #XHTML #Mobile #浏览器 #Opera #ViewUI

Javascript一些小效果练习专栏收录该内容

3 篇文章

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="jquery-1.3.1.js">
        </script>
        <script>
            $(document).ready(function(){
                $(".conbox h3").toggle(function(){       

                    $(this).parent().nextAll().animate({
                        height: 'toggle',
                        opacity: 'toggle'
                    },{duration:"slow"});
                    return false;

                }, function(){
                    $(this).parent().nextAll("").animate({
                        height: 'toggle',
                        opacity: 'toggle'
                    },{duration:"slow"});
                    return false;
                    //alert("test2");
                })
            })
        </script>
        <style>
             * {
                margin: 0;
                padding: 0
            } .m_t_8_import {
                margin-top: 8px !important
            }

            body {
                font-size: 12px;
                line-height: 18px;
                font-family: Tahoma;
                color: #333;
            } .conbox {
                width: 300px;
                margin: 0 auto;
                border: red 1px solid
            } .conbox .title_bar {
            } .conbox .title_bar h3 {
                background-color: green;
                color: #fff;
                line-height: 24px;
                font-weight: bold;
                padding-left: 15px;
                cursor: pointer;
            } .text {
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <div class="conbox">
            <div class="title_bar">
                <h3>标题1</h3>
            </div>
            <div class="text">
                可以看到，XHTML 1.0 Transitional的地位很暧昧，它的Transitional 使得其MAY text/html，SHOULD application/xhtml+xml。也就是说，怎么处理，实际上交由客户端（client side）来决定。在我所见到的桌面浏览器中，它们都毫不犹豫地选择text/html，这跟它们一贯的宽容风格保持一致。 
                但是很不幸的是，就有这么一个浏览器，Opera for mobile，从8.0开始，凡是声明了XHTML的Doctype，它都一律以application/xhtml+xml来处理。所以，你那不良构的网站，只好在它上面显示出错信息。  
                所以，推荐使用XHTML 1.0 Transitional，是鼓励你从HTML向XHTML转化，且保持过渡性。但过渡性并不代表你就可以不重视XML的良构。 
            </div>
			<div>2222222 area</div>
			<div>33333 area</div>
        </div>
        <div class="conbox m_t_8_import">
            <div class="title_bar">
                <h3>标题22</h3>
            </div>
            <div class="text">
                可以看到，XHTML 1.0 Transitional的地位很暧昧，它的Transitional 使得其MAY text/html，SHOULD application/xhtml+xml。也就是说，怎么处理，实际上交由客户端（client side）来决定。在我所见到的桌面浏览器中，它们都毫不犹豫地选择text/html，这跟它们一贯的宽容风格保持一致。 
                但是很不幸的是，就有这么一个浏览器，Opera for mobile，从8.0开始，凡是声明了XHTML的Doctype，它都一律以application/xhtml+xml来处理。所以，你那不良构的网站，只好在它上面显示出错信息。  
                所以，推荐使用XHTML 1.0 Transitional，是鼓励你从HTML向XHTML转化，且保持过渡性。但过渡性并不代表你就可以不重视XML的良构。 
            </div>
        </div>
    </body>
</html>