码迷,mamicode.com
首页 > 其他好文 > 详细

选项卡

时间:2017-05-26 18:56:49      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:type   asc   display   padding   code   javascrip   parent   ext   absolute   

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
.bigbox >li {    
    width:auto;
    position: relative;

}        
.bigbox >li >ul{
    display: none;
    position: absolute;
    left: 100px;
    top:0px;
}    
.bigbox >li >ul >li >ul{
    display: none;
    position:absolute;
    left: 100px;
    top: 0;
}    
        
    </style>
</head>
<body>
    <ul class="bigbox">
        <li>
            <a href="#">daohang-01</a>
            <ul>
                <li>
                    <a href="#">neirong1</a>
                    <ul>
                        <li>neirong2</li>
                    </ul>

                </li>
            </ul>

        </li>
        <li>
            <a href="#">daohang-02</a>
            <ul>
                <li>
                    <a href="#">neirong2</a>
                    <ul>
                        <li>neirong22</li>
                    </ul>

                </li>
            </ul>
            
        </li>
        <li>
            <a href="#">daohang-03</a>
            <ul>
                <li>
                    <a href="#">neirong3</a>
                    <ul>
                        <li>neirong33</li>
                    </ul>

                </li>
            </ul>
        </li>
    </ul>    
</body>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(.bigbox >li >a).click(function(){
                $(this).siblings(ul).show();
                $(this).parent(li).siblings().children(ul).hide();
            });
            $(".bigbox >li >ul >li >a ").click(function(){
                var box=$(.bigbox >li >ul>li >ul);
                $(box).hide();
                $(this).siblings(ul).show();

            });
                
        })
    </script>
</html>

 

选项卡

标签:type   asc   display   padding   code   javascrip   parent   ext   absolute   

原文地址:http://www.cnblogs.com/jinsuo/p/6909964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!