js实现导航页面

最新推荐文章于 2023-02-11 14:40:43 发布

weixin_33670786

最新推荐文章于 2023-02-11 14:40:43 发布

阅读量725

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/zyxchuxin/blog/542297

2019独角兽企业重金招聘Python工程师标准>>>

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <title>管理页面nav导航</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        position: relative;
        overflow: hidden;
        width:200px;
        border:1px solid #ccc;
        margin:10px;
        padding:10px;
        box-shadow: 0 0 6px #333;
    }
    li{
        list-style: none;
        background: pink;
        line-height:24px;
        margin:10px auto;
        cursor:pointer;
    }
    p{
        background: green;
        padding-left: 2em;
        cursor:pointer;
    }
    li p{
        display: none;
    }
    .open{
        color:blue;
    }
    </style>
</head>
<body>
    <div id="nav" class="wrapper">
        <ul>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第一个导航列表
                <p>- Hello World</p>
                <p>- Good Morning</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第二个导航列表
                <p>- First</p>
                <p>- Second</p>
                <p>- Third</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第三个导航列表
                <p>- Finished</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第四个导航列表
                <p>- Hello World</p>
                <p>- Good Morning</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第五个导航列表
                <p>- First</p>
                <p>- Second</p>
                <p>- Third</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第六个导航列表
                <p>- Finished</p>
            </li>
        </ul>
    </div>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    var liList = $("#nav li") ;
    for(var i=0,max=liList.length;i<max;i++){
        $(liList[i]).attr("data-index",i) ;
    }
    liList.click(function(){
        var self = this;
        for(var i=0,max=liList.length;i<max;i++){
            if(i == $(self).data("index")){
                if($(self).hasClass("open")){
                    $(self).removeClass("open") ;
                    $(self).find("p").hide();
                    $(self).find(".icon-img").css({"transform":"rotate(0)","transition":"all 0.5s"});
                }
                else{
                    $(self).addClass("open") ;
                    $(self).find("p").show();
                    $(self).find(".icon-img").css({"transform":"rotate(180deg)","transition":"all 0.5s"});
                }
            }
            else{
                if($(liList[i]).hasClass("open")){
                    $(liList[i]).removeClass("open") ;
                    $(liList[i]).find("p").hide();
                    $(liList[i]).find(".icon-img").css({"transform":"rotate(0)","transition":"all 0.5s"});
                }
            }
        }
    });
    </script>
</body>
</html>

转载于:https://my.oschina.net/zyxchuxin/blog/542297