简单的二级菜单

最新推荐文章于 2022-09-20 22:33:33 发布
暗诡刺
最新推荐文章于 2022-09-20 22:33:33 发布
阅读量922
点赞数
分类专栏： CSS javascript HTML
本文链接：https://blog.csdn.net/anxin591025/article/details/9175923
版权
javascript 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
HTML
12 篇文章 0 订阅
订阅专栏
CSS
6 篇文章 0 订阅
订阅专栏
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="daohang.aspx.cs" Inherits="_0A_ANXIN.daohang" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/Jquery1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            //*******************一级菜单点击******************
            var yijicaidan;//上一次点击的元素
            $('.div_ul_li').click(function () {
                $(this).css({ 'background-color': '#555' });
                $(this).unbind('mouseover').unbind('mouseout');//给点击的元素解绑，不再随着鼠标的变化而变化
                $(this).parent().children('div:last').css('display', $(this).parent().children('div:last').css('display') == 'none' ? 'initial' : 'none');
                if (yijicaidan != null && yijicaidan.text() != $(this).text()) {//判断是不是同一个元素
                    yijicaidan.css({ 'background-color': '#eee' });//初始化上一次点击的div的背景颜色
                    yijicaidan.parent().children('div:last').css('display', 'none');//隐藏上一次点击的元素的二级菜单
                    yijicaidan.bind('mouseover', function () {
                        $(this).css({ 'background-color': '#aaa' });
                    })//给上一次点击的元素帮顶mouseover事件
                    yijicaidan.bind('mouseout', function () {
                        $(this).css({ 'background-color': '#eee' });
                    })//给上一次点击的元素帮顶mouseout事件
                    yijicaidan = null;
                }
                yijicaidan = $(this);
            })
            //*******************一级效果***********************
            $('.div_ul_li').bind('mouseover', function () {
                $(this).css({'background-color':'#aaa'});
            })
            $('.div_ul_li').bind('mouseout', function () {
                $(this).css({ 'background-color': '#eee' });
            })


            var erjicaidan;上一次点击的元素
            //********************二级菜单点击*********************
            $('.div_ul_li_div ul li').click(function () {
                if (erjicaidan!=null) {
                    erjicaidan.css({ 'background-color': '#def' });//初始化所有的二级菜单背景
                }
                window.open($(this).children('input').val(), "content");
                $(this).css({ 'background-color': '#789' }).unbind('mouseover').unbind('mouseout');
                if (erjicaidan != null && erjicaidan.text() != $(this).text()) {//判断是不是同一个元素
                    erjicaidan.css({ 'background-color': '#def' });//初始化上一次点击的div的背景颜色
                    erjicaidan.bind('mouseover', function () {
                        $(this).css({ 'background-color': '#abc' });
                    })//给上一次点击的元素帮顶mouseover事件
                    erjicaidan.bind('mouseout', function () {
                        $(this).css({ 'background-color': '#def' });
                    })//给上一次点击的元素帮顶mouseout事件
                    erjicaidan = null;
                }
                erjicaidan = $(this);
            })
            //*******************二级效果***********************
            $('.div_ul_li_div ul li').bind('mouseover', function () {
                $(this).css({ 'background-color': '#abc' });
            })
            $('.div_ul_li_div ul li').bind('mouseout', function () {
                $(this).css({ 'background-color': '#def' });
            })
        })
    </script>
    <style type="text/css">
        /***********第一级菜单***********/
        #div_ul {
            list-style-type: none;
        }
        .div_ul_li {
            cursor: pointer;
            background-color: #eee;
            padding: 5px 0 5px 5px;
            margin-left: -40px;
            font-size:15px;
        }
        /***********第二级菜单***********/
        .div_ul_li_div ul {
            list-style-type: none;
        }
            .div_ul_li_div ul li {
                cursor: pointer;
                margin-left:-80px;
                padding:5px 0 5px 15px;
                background-color:#def;
                font-size:12px;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="div_ul" runat="server">
        <li>
            <div class="div_ul_li">
                我的工作
            </div>
            <div class="div_ul_li_div" style="display:none;">
                <ul>
                    <li>
                        我的消息<input type="hidden" value="http://www.baidu.com">
                    </li>
                    <li>
                        我的邮件<input type="hidden" value="http://www.baidu.com">
                    </li>
                    <li>
                        我的短信<input type="hidden" value="http://www.baidu.com">
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="div_ul_li">
                计划/考勤
            </div>
            <div class="div_ul_li_div" style="display:none;">
                <ul>
                    <li>
                        aaa<input type="hidden" value="http://www.baidu.com">
                    </li>

                </ul>
            </div>
        </li>
        <li>
            <div class="div_ul_li">
                公文处理
            </div>
            <div class="div_ul_li_div" style="display:none;">
                <ul>
                    <li>
                        aaa<input type="hidden" value="http://www.baidu.com">
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="div_ul_li">
                资源/会议
            </div>
            <div class="div_ul_li_div" style="display:none;">
                <ul>
                    <li>
                        aaa<input type="hidden" value="http://www.baidu.com">
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="div_ul_li">
                车辆/司机
            </div>
            <div class="div_ul_li_div" style="display:none;">
                <ul>
                    <li>
                        aaa<input type="hidden" value="http://www.baidu.com">
                    </li>
                </ul>
            </div>
        </li>
    </ul>
    </div>
    </form>
</body>
</html>

这里前台的内容只是例子，实际要显示的内容是从后台读取的数据库。下面有后台和数据库的截图

后台：

protected void Page_Load(object sender, EventArgs e)
        {
            GetReader();
        }
        void GetReader()
        {
            div_ul.InnerHtml = "";
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["str"].ConnectionString);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.CommandText = "Pro_select_guilei";
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            StringBuilder strs = new StringBuilder();
            foreach (DataRow item in dt.Rows)
            {
                strs.Append("<li><div class=\"div_ul_li\">"+item["name"]+"</div><div class=\"div_ul_li_div\" style=\"display:none;\"><ul>");
                cmd.CommandText = "Pro_select_caidan";
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Clear();
                cmd.Parameters.Add(new SqlParameter("@fatherid", item["contentid"]));
                adapter.SelectCommand = cmd;
                DataTable dtd = new DataTable();
                adapter.Fill(dtd);
                foreach (DataRow item1 in dtd.Rows)
                {
                    strs.Append("<li>"+item1["name"]+"<input type='hidden' value='"+item1["url"]+"' /></li>");
                }
                strs.Append("</ul></div></li>");
            }
            adapter.Dispose();
            cmd.Dispose();
            con.Dispose();
            div_ul.InnerHtml = strs.ToString();
        }