使用jquery 简单实现下拉菜单

2020-05-22 16:18:53易采站长站整理

Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能;

首先肯定要在页面引用jquery.js  版本不限 ;

接下来把=====================html贴出来:


<div class=”header_menu”> 
        <ul> 
            <li class=”menuli” id=”xtgl_menu”>系统管理</li> 
            <li class=”menuli” id=”ggsq_menu”>干管所勤</li> 
            <li class=”menuli” id=”bhz_menu”>保护站</li> 
            <li class=”menuli” id=”mcjy_menu”>木材检验</li> 
            <li class=”menuli” id=”slgh_menu”>森林管护</li> 
        </ul> 
    </div> 
<div class=”display movediv” id=”slgh_menu_div”> 
    <ul> 
        <li class=”redli”>出勤管理</li> 
        <li class=”redli”>巡视管理</li> 
        <li class=”redli”>现场取证</li> 
        <li class=”redli”>问题处置</li> 
    </ul> 
</div> 
<div class=”display movediv” id=”mcjy_menu_div”> 
    <ul> 
        <li class=”redli”>位置监测</li> 
        <li class=”redli”>检验管理</li> 
    </ul> 
</div> 
<div class=”display movediv” id=”bhz_menu_div”> 
    <ul> 
        <li class=”redli”>出勤管理</li> 
        <li class=”redli”>监管信息</li> 
    </ul> 
</div> 
<div class=”display movediv” id=”ggsq_menu_div”> 
    <ul> 
        <li class=”redli”>出勤管理</li> 
        <li class=”redli”>监管信息</li> 
    </ul> 
</div> 
<div class=”display movediv” id=”xtgl_menu_div”>