<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>jquery练习1</title>

    <style>

    *{

        list-style: none;

        text-decoration: none;

        padding: 0;

        margin: 0 auto;

     }

     .level1{

          width:100px;

         height:auto;

         line-height:35px;

         background-color:pink;

         border-bottom:1px solid #999;

     }

     .level2 li{

         text-align:center;

         width:100px;

         height:35px;

         line-height:35px;

         background-color:#ccc;

         border-bottom:1px solid #999;

     }

     .level1:hover{

         background-color:yellow;

     }

     .level2 li:hover{

        background-color:yellow;

     }

     .level2{

         display:none;

    }

    .current{

          color:red;

     }

    </style>

    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

        $(".level1>a").bind("click",function(){

            if($(this).next().is(":visible")){

                $(this)

                .addClass("current")

                .next()

                .hide()

                .parent()

                .siblings()

            .children("a")

            .removeClass("current")

            .next()

            .hide();

            return false;

            }else{

                $(this)

                .addClass("current")

                .next()

                .show()

                .parent()

                .siblings()

            .children("a")

            .removeClass("current")

            .next()

            .hide();

            return false;

            }

        })

    })

    </script>

</head>

<body>

<div class="box">

    <ul class="menu">

        <li class="level1" id="level1">

            <a href="#">衬衫</a>

            <ul class="level2" id="level2">

                <li><a href="#">短袖衬衫</a></li>

                <li><a href="#">长袖衬衫</a></li>

                <li><a href="#">短袖T恤</a></li>

                <li><a href="#">长袖T恤</a></li>

            </ul>

        </li>

        <li class="level1" id="level1">

            <a href="#">卫衣</a>

            <ul class="level2" id="level2">

                <li><a href="#">开衫卫衣</a></li>

                <li><a href="#">套头卫衣</a></li>

                <li><a href="#">运动卫衣</a></li>

                <li><a href="#">童装卫衣</a></li>

            </ul>

        </li>

        <li class="level1" id="level1">

            <a href="#">裤子</a>

            <ul class="level2" id="level2">

                <li><a href="#">短裤</a></li>

                <li><a href="#">休闲裤</a></li>

                <li><a href="#">牛仔裤</a></li>

                <li><a href="#">免烫卡其裤</a></li>

            </ul>

        </li>

    </ul>

</div>

</body>

</html>
【事件绑定】在文档加载完后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：bind(type,data,fn);

参数说明：

第一个参数是事件类型；第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象；第三个则是用来绑定的处理函数。

在上面的例子中实现了单击标题显示“内容”，在单击，隐藏“内容”，再次单击有显示“内容”的两个循环动作，为了实现这个功能，需要经过以下几个步骤：

（1）等待DOM装载完毕；

（2）找到“标题”所在的元素，绑定click事件；

（3）找到“内容”元素，如果“内容”元素是显示的，则隐藏；反之亦然。

原理如下：

if("内容"  显示){

    "内容"  隐藏

}else{

    "内容"  显示

}

jquery——简单的下拉列表制作及bind()方法的示例的更多相关文章

  1. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

  2. Jquery中的bind()方法的一点问题

    bind()方法绑定事件的时候,第二个参数是函数,如果代码都写在函数里面,没有任何问题.但是,直接调用外部封装的函数需要注意,出错的例子: <!doctype html> <html ...

  3. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  4. jquery bind()方法与live()方法的区别

    jquery bind() 方法和 live() 方法都可以绑定元素事件. <!DOCTYPE html> <html> <head> <meta chars ...

  5. jQuery 事件 - bind() 方法

    定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 实例1(一个事件) 记得把js引用地址换掉 当点击鼠标时,隐藏或显示 p 元素: <html&g ...

  6. jquery简单使用（看教程：快全有实例）（固定样式：$().val()设置属性，$().click()设置方法）

    jquery简单使用(看教程:快全有实例)(固定样式:$().val()设置属性,$().click()设置方法) 一.总结 1.jquery不懂之处直接看教程,案例都有,有简单又快 2.jquery ...

  7. jquery bind()方法 语法

    jquery bind()方法 语法 作用:bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 说明:规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行 ...

  8. 简单模拟实现javascript中的call、apply、bind方法

    目录 引子 隐式丢失 硬绑定 实现及原理分析 总体实现(纯净版/没有注释) 写在最后 引子 读完<你不知道的JavaScript--上卷>中关于this的介绍和深入的章节后,对于this的 ...

  9. 使用JS简单实现一下apply、call和bind方法

    使用JS简单实现一下apply.call和bind方法 1.方法介绍 apply.call和bind都是系统提供给我们的内置方法,每个函数都可以使用这三种方法,是因为apply.call和bind都实 ...

随机推荐

  1. QThread与多线程（比较清楚）

    QThread类为我们提供了一种平台无关的管理线程的方式.一个QThread对象管理应用程序中的一个线程,该线程从run()函数开始执行.并且,默认情况下,我们可以在run()函数中通过调用QThre ...

  2. 基于Django的Disqus如何支持每月80亿PV（转）

    原文:基于Django的Disqus如何支持每月80亿PV 本文由 伯乐在线 - 贱圣OMG 翻译.未经许可,禁止转载!英文出处:Matt Robenolt.欢迎加入翻译小组. 现在我们Disqus能 ...

  3. MySQL如何优化GROUP BY ：松散索引扫描 VS 紧凑索引扫描

    执行GROUP BY子句的最一般的方法:先扫描整个表,然后创建一个新的临时表,表中每个组的所有行应为连续的,最后使用该临时表来找到组 并应用聚集函数.在某些情况中,MySQL通过访问索引就可以得到结果 ...

  4. 【python】判断字符串以什么开头或结尾

    项目中用到python判断一个字符串是否以某个字符串结尾,比如,筛选一个目录下所有以.mp4结尾的文件. >>> item = "demo.mp4" >&g ...

  5. 剑指offer 面试10题

    面试10题: 题目:大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项.n<=39 n=0时,f(n)=0 n=1时,f(n)=1 n>1时,f(n)=f(n-1 ...

  6. Multi-thread & Multi-process

    关于多进程和多线程,教科书上最经典的一句话是“进程是资源分配的最小单位,线程是CPU调度的最小单位”. 对于到底是使用多进程还是多线程, 要根据实际情况来判断,选择更适合的. 具体情况,可以参考下面: ...

  7. Ubuntu 安装VMware Tools

    安装步骤: 首先,点击VMware菜单的-VM-Install VMware Tools (虚拟机-装载VMwareTool 工具) 这时,在Ubuntu下会自动加载Linux版的VMware Too ...

  8. 流量分析系统--zookeeper集群部署

    安装zookeeper mkdir apps tar -zxvf zookeeper-3.4.5.tar.gz -C apps [root@mini1 zookeeper-3.4.5]# rm -rf ...

  9. web测试点梳理

    前言 前面一篇文章讲解了app测试一些功能点.那么相应的也梳理一下web测试相关的功能的测试点吧,此篇文章只是给你们一个思路,如果要涉及web端每个测试点,基本不可能实现的,所以只是提供一个设计的思路 ...

  10. http,soap and rest

    http://www.cnblogs.com/hyhnet/archive/2016/06/28/5624422.html http://www.cnblogs.com/bellkosmos/p/52 ...