• jquery 级联菜单


    经常用到这个虽然网上有这个事例,放在这里以备后用:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1-5-1</title>
    <style type="text/css">
    #menu {
        300px;
    }
    .has_children{
        background : #555;
        color :#fff;
        cursor:pointer;
    }
    .highlight{
        color : #fff;
        background : green;
    }
    div{
        padding:0;
    }
    div a{
        background : #888;
        display : none;
        float:left;
        300px;
    }
    </style>
    <!-- 引入 jQuery -->
    <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function(){
        $(".has_children").click(function(){
            $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
        });
    });
    </script>
    </head>
    <body>
    <div id="menu">
        <div class="has_children">
            <span>第1章-认识jQuery</span>
            <a>1.1-JavaScript和JavaScript库</a>
            <a>1.2-加入jQuery</a>
            <a>1.3-编写简单jQuery代码</a>
            <a>1.4-jQuery对象和DOM对象</a>
            <a>1.5-解决jQuery和其它库的冲突</a>
            <a>1.6-jQuery开发工具和插件</a>
            <a>1.7-小结</a>
        </div>
        <div class="has_children">
            <span>第2章-jQuery选择器</span>
            <a>2.1-jQuery选择器是什么</a>
            <a>2.2-jQuery选择器的优势</a>
            <a>2.3-jQuery选择器</a>
            <a>2.4-应用jQuery改写示例</a>
            <a>2.5-选择器中的一些注意事项</a>
            <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
            <a>2.7-还有其它选择器么?</a>
            <a>2.8-小结</a>
        </div>
        <div class="has_children">
            <span>第3章-jQuery中的DOM操作</span>
            <a>3.1-DOM操作的分类</a>
            <a>3.2-jQuery中的DOM操作</a>
            <a>3.3-案例研究——某网站超链接和图片提示效果</a>
            <a>3.4-小结</a>
        </div>
    </div>
    </body>
    </html>

    对以上的解释:

    jquery的入门程序

    $(this)相当于jquery(this)标记

    $(".has_children").click(function(){
    $(this).addClass("highlight")
    .children("a").show().end()
    .siblings().removeClass("highlight").children("a").hide();
    })

    这一串实际实现了三段命令

    一个是相当于被鼠标点击的带has_children类的标签变成了类highlight
    第二个命令相当于把子元素a标签的内容显示出来
    第三个命令相当于把被鼠标点击的带as_children类的div标签的兄弟标签们(不包括被点中的这个div)去掉highlight类(恢复到默认的has_children类)
    第四个命令相当于把被鼠标点击的div标签的兄弟标签(不包括被点中的这个div)的子元素a标签内容隐藏。

    end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
    说白了,相当于将当前操作的对象(.children("a"))跳回到最先的对象,就是说接下来.siblings()的主体回归到$(this),而不是.children("a")

  • 相关阅读:
    hyper-v启动虚拟机时提示“The application encountered an error while attempting to change the state of the machine ‘虚拟机名称'”如何处理?
    ubuntu下如何开机自动执行自定义脚本?
    centos下如何开放某个端口?
    linux都有哪些运行级别?
    linux内核在挂载ramdisk的过程中报错"RAMDISK: incomplete write (10739 != 32768)"如何处理?
    linux内核挂载根文件系统时报错”VFS: Cannot open root device "ram0" or unknown-block(0,0): error -6“如何处理?
    c代码审查软件
    项目管理术语表
    项目管理常用缩写
    MYSQL的读写分离主从延时问题
  • 原文地址:https://www.cnblogs.com/northeastTycoon/p/2756964.html
Copyright © 2020-2023  润新知