jquery垂直菜单特效

jquery垂直菜单特效

 

CSS样式代码：

<style>
        .menu_list{
            width: 268px;
            margin: 0 auto;
        }
        .menu_head{
            height: 47px;
            line-height: 47px;
            padding-left: 38px;
            font-size: 14px;
            color: #525252;
            cursor: pointer;
            border-left: 1px solid #e1e1e1;
            border-right: 1px solid #e1e1e1;
            border-bottom: 1px solid #e1e1e1;
            border-top: 1px solid #f1f1f1;
            position: relative;
            margin: 0px;
            font-weight: bold;
            background: #f1f1f1 url(../img/pro_left.png);
            background-position: center right;
            background-repeat: no-repeat;
        }
        .menu_list .current{
            background: #f1f1f1 url(../img/pro_down.png);
            background-position: center right;
            background-repeat: no-repeat;
        }
        .menu_body{
            line-height: 38px;
            border-left: 1px solid #e1e1e1;
            background: #fff;
            border-right: 1px solid #e1e1e1;
        }
        .menu_body a{
            display: block;
            height: 38px;
            line-height: 38px;
            padding-left: 38px;
            color: #777777;
            background: #fff;
            text-decoration: none;
            border-bottom: 1px solid #e1e1e1;
        }
        .menu_body a:hover{
            text-decoration: none;
        }
    </style>

HTML代码：

<div id="firstpane" class="menu_list">
        <h3 class="menu_head current">哲学</h3>
        <div style class="menu_body">
            <a href="#">科学技术哲学</a>
            <a href="#">宗教学</a>
            <a href="#">美学</a>
            <a href="#">伦理学</a>
            <a href="#">逻辑学</a>
            <a href="#">外国哲学</a>
            <a href="#">中国哲学</a>
            <a href="#">马克思主义哲学</a>
        </div>

        <h3 class="menu_head">经济学</h3>
        <div style="display: none;" class="menu_body">
            <a href="#">应用经济学</a>
            <a href="#">理论经济学</a>
            <a href="#">国民经济学</a>
            <a href="#">区域经济学</a>
            <a href="#">产业经济学</a>
            <a href="#">国际贸易学</a>
            <a href="#">劳动经济学</a>
            <a href="#">政治经济学</a>
        </div>

        <h3 class="menu_head">法学</h3>
        <div style="display: none;" class="menu_body">
            <a href="#">马克思主义基本原理</a>
            <a href="#">马克思主义发展史</a>
            <a href="#">马克思主义中国化研究</a>
            <a href="#">国外马克思主义研究</a>
            <a href="#">思想政治教育</a>
        </div>

        <h3 class="menu_head">教育学</h3>
        <div style="display: none;" class="menu_body">
            <a href="#">体育人文社会学</a>
            <a href="#">体育教育训练学</a>
            <a href="#">民族传统体育学</a>
            <a href="#">发展与教育心理学</a>
            <a href="#">应用心理学</a>
            <a href="#">教育学原理</a>
            <a href="#">课程与教学论</a>
            <a href="#">比较教育学</a>
        </div>

        <h3 class="menu_head">工学</h3>
        <div style="display: none;" class="menu_body">
            <a href="#">一般力学与力学基础</a>
            <a href="#">固体力学</a>
            <a href="#">流体力学</a>
            <a href="#">工程力学</a>
            <a href="#">机械制造及其自动化</a>
            <a href="#">机械电子工程</a>
        </div>
    </div>

script脚本代码：

 <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){

            $('#firstpane .menu_body:eq(0)').show()
            $('#firstpane h3.menu_head').click(function(){
                $(this).addClass('current').next('div.menu_body').slideToggle(300).siblings('div.menu_body').slideUp('slow')
                $(this).siblings().removeClass('current')
            });

            $('#secondpane .menu_body:eq(0)').show()
            $('#secondpane h3.menu_head').mouseover(function(){
                $(this).addClass('current').next('div.menu_body').slideDown(500).siblings('div.menu_body').slideUp('slow')
                $(this).siblings().removeClass('current')
            })
        })

预览效果：