jquery实现带二级菜单的导航示例_jquery

复制代码 代码如下:

$(document).ready(function () {
    $('#Top .Toolbar1 .CentreBox .Menu .List1 li').mouseenter(function () {
        var index = $(this).parent().children().index(this);
        $(this).parent().children().each(function () {
            if ($(this).hasClass('Select')) {
                $(this).removeClass('Select');
            }
        });
        $(this).addClass('Select');

        $('#Top .Toolbar2 .CentreBox .Menu').each(function () {
            if (!$(this).hasClass('Hide')) {
                $(this).addClass('Hide');
            }
        });
        $('#Top .Toolbar2 .CentreBox .Menu').eq(index).removeClass('Hide');
    });

    $('#Top .Toolbar2 .CentreBox .Menu ul li a').mouseenter(function () {
        var index = $('#Top .Toolbar2 .CentreBox .Menu ul li a').index(this);
        $('#Top .Toolbar2 .CentreBox .Menu ul li').each(function () {
            if ($(this).hasClass('Select')) {
                $(this).removeClass('Select');
            }
        });
        $(this).parent().addClass('Select');
    });
});

时间: 2024-11-02 10:16:15

jquery实现带二级菜单的导航示例_jquery的相关文章

如何利用html做一个具有二级菜单的导航框

问题描述 如何利用html做一个具有二级菜单的导航框 我学习了html的基础知识,不知道怎么样才能做一个具有二级菜单的导航框,求各位大神指点, 解决方案 这个不难实现,使用列表和css就能实现.实例代码: http://www.oschina.net/code/snippet_2274992_44265 解决方案二: css菜单 13个不错的Javascript和CSS的菜单 解决方案三: 可以参考: http://www.jq22.com/jquery-plugins%E6%89%8B%E9%

Jquery组件easyUi实现表单验证示例_jquery

本文实例为大家分享了Jquery easyUi表单验证实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Form - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hr

jQuery树形下拉菜单特效代码分享_jquery

本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考. 运行jQuery树形下拉菜单特效效果图: 为大家分享的jQuery树形下拉菜单代码如下 <head> <title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="

jquery实现树形二级菜单实例代码_jquery

直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

DJANGO结合jQuery cxSelect 作二级菜单过滤

EN,到这个阶段,基本功能算是完成了. 使用了jQuery cxSelect这个插件. http://code.ciaoca.com/jquery/cxselect/ 相关代码如下: html: <form class="uk-form" name="filter-form"> <div id="element_id"> 项目:<select class="Site_name" name=&quo

用jquery生成二级菜单的实例代码_jquery

javascript 页面中的函数 复制代码 代码如下: function querySub(id,sid/*选中的项*/){$.post('${path}/page/article/querySubChannelArticle.action',                 {'channelId':id},function(data){                     $('select[name="article.subChannel.subId"] option[va

jQuery简单实现列表隐藏和显示效果示例_jquery

本文实例讲述了jQuery简单实现列表隐藏和显示效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏和显示</title> <style> *{ padding: 0; margin: 0;} li{ list-style-type: none;} bo

jQuery简单实现彩色云标签效果示例_jquery

本文实例讲述了jQuery简单实现彩色云标签效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: <script type="text/javascript"> $(function () { randomCloudLabel(); }); function randomCloudLabel() { var obj = $("#CloudLabel a"); function rand(num) { return parseInt(Math

为jQuery.Treeview添加右键菜单的实现代码_jquery

先上图: jquery.treeview 数据通过JSON数据加载,有需要的朋友,可以通jquery的AJAX方法获取相关的JSON数据 json的数据格式:{"id":1,"parentid":0,"title":"标题","children":[{ ...}]} 需要两个jQuery 两件 (jquery.treeview.min.js 树插件 和 jquery.contextmenu.r2.js 右键