jquery模块化（aside）

最新推荐文章于 2024-09-06 15:00:38 发布

原创最新推荐文章于 2024-09-06 15:00:38 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的手风琴效果侧边栏导航。通过点击导航项，可以展开或收起子菜单，适用于网页应用程序中作为主要导航组件。

制作侧边栏导航（手风琴）

<div id="aside">
    <ul>
        <li>
            <div class="nav"><a href="javascript:;">主页</a></div>
            <ul class="sum">
                <li class="list"><a href="javascript:;">主页一</a></li>
                <li class="list"><a href="javascript:;">主页二</a></li>
                <li class="list"><a href="javascript:;">主页三</a></li>
            </ul>
        </li>
         <li>
             <div class="nav"><a href="javascript:;">应用</a></div>
             <ul class="sum">
                 <li class="list"><a href="javascript:;">应用一</a></li>
                 <li class="list"><a href="javascript:;">应用二</a></li>
                 <li class="list"><a href="javascript:;">应用三</a></li>
             </ul>
        </li>
    </ul>
</div>

<script>
    $(".nav").click(
        function(){
            $(".sum").slideUp();
            if($(this).next().is(":hidden")){
                $(this).next().slideDown();
            }
        }
    )
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style:none;
    }
    a{
        text-decoration: none;
        color:#e6e6e8;
    }
    #aside{
        position:fixed;
        top:0;
        left:0;
        bottom: 0;
        width: 100px;
        background: #333333;
    }
    #aside>ul{
        padding:30px 0 0 0px;
        background: black;
        text-align: center;
    }
    .nav{
        line-height: 40px;
        border-bottom: 1px solid #333333;
    }
    .sum{
        display: none;
    }
    .list{
        font-size: 14px;
        line-height: 40px;
        border-bottom: 1px solid #333333;
    }

</style>