1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jquery练习1</title>
  6.     <style>
  7.     *{
  8.         list-style: none;
  9.         text-decoration: none;
  10.         padding: 0;
  11.         margin: 0 auto;
  12.      }
  13.      .level1{
  14.           width:100px;
  15.          height:auto;
  16.          line-height:35px;
  17.          background-color:pink;
  18.          border-bottom:1px solid #999;
  19.      }
  20.      .level2 li{
  21.          text-align:center;
  22.          width:100px;
  23.          height:35px;
  24.          line-height:35px;
  25.          background-color:#ccc;
  26.          border-bottom:1px solid #999;
  27.      }
  28.      .level1:hover{
  29.          background-color:yellow;
  30.      }
  31.      .level2 li:hover{
  32.         background-color:yellow;
  33.      }
  34.      .level2{
  35.          display:none;
  36.     }
  37.     .current{
  38.           color:red;
  39.      }
  40.     </style>
  41.     <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
  42.     <script type="text/javascript">
  43.     $(document).ready(function(){
  44.         $(".level1>a").bind("click",function(){
  45.             if($(this).next().is(":visible")){
  46.                 $(this)
  47.                 .addClass("current")
  48.                 .next()
  49.                 .hide()
  50.                 .parent()
  51.                 .siblings()
  52.             .children("a")
  53.             .removeClass("current")
  54.             .next()
  55.             .hide();
  56.             return false;
  57.             }else{
  58.                 $(this)
  59.                 .addClass("current")
  60.                 .next()
  61.                 .show()
  62.                 .parent()
  63.                 .siblings()
  64.             .children("a")
  65.             .removeClass("current")
  66.             .next()
  67.             .hide();
  68.             return false;
  69.             }
  70.         })
  71.  
  72.     })
  73.     </script>
  74. </head>
  75. <body>
  76. <div class="box">
  77.     <ul class="menu">
  78.         <li class="level1" id="level1">
  79.             <a href="#">衬衫</a>
  80.             <ul class="level2" id="level2">
  81.                 <li><a href="#">短袖衬衫</a></li>
  82.                 <li><a href="#">长袖衬衫</a></li>
  83.                 <li><a href="#">短袖T恤</a></li>
  84.                 <li><a href="#">长袖T恤</a></li>
  85.             </ul>
  86.         </li>
  87.         <li class="level1" id="level1">
  88.             <a href="#">卫衣</a>
  89.             <ul class="level2" id="level2">
  90.                 <li><a href="#">开衫卫衣</a></li>
  91.                 <li><a href="#">套头卫衣</a></li>
  92.                 <li><a href="#">运动卫衣</a></li>
  93.                 <li><a href="#">童装卫衣</a></li>
  94.             </ul>
  95.         </li>
  96.         <li class="level1" id="level1">
  97.             <a href="#">裤子</a>
  98.             <ul class="level2" id="level2">
  99.                 <li><a href="#">短裤</a></li>
  100.                 <li><a href="#">休闲裤</a></li>
  101.                 <li><a href="#">牛仔裤</a></li>
  102.                 <li><a href="#">免烫卡其裤</a></li>
  103.             </ul>
  104.         </li>
  105.     </ul>
  106. </div>
  107. </body>
  108. </html>
  1. 【事件绑定】在文档加载完后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：bind(type,data,fn);

参数说明：

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

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

（1）等待DOM装载完毕；

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

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

原理如下：

  1. if("内容"  显示){
  2.     "内容"  隐藏
  3. }else{
  4.     "内容"  显示
  5. }

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. SpringBoot + Thymeleaf + Validate验证

    在开发业务时,不可避免的需要处理一些校验, 如果是写 if-else 这种代码去校验, 那会有一大段这样的代码.不过还好有个校验插件: javax.validation.validation-api  ...

  2. MySQL权限系统(一).The MySQL Access Privilege System 概述

    纯属个人阅读,如有翻译错误,请指出 The primary function of the MySQL privilege system is to authenticate a user who c ...

  3. Linux介绍和基本命令

    Linux是什么? 就是运行在硬件之上的一组软件,主要控制内核和系统调用这2个层面为上层应用软件提供各种接口,并高效的控制硬件资源,与window一样是一种操作系统 Linux的创始人是林纳斯-托瓦兹 ...

  4. Python操作Redis（一）

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  5. Thinking In Myself

    what is the I want to be? you know yourself?  what is your dream? your interest? your passion? why y ...

  6. Python线程包装器

    import threading import subprocess import time def need_thread(func, *args, **kwargs): def fun(): pr ...

  7. Python-openpyxl操作

    from openpyxl import Workbook from openpyxl import load_workbook # 加载workbook,注意,openpyxl只支持xlsx格式 w ...

  8. vue增删改查

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Redis分布式锁的python实现

    案例1: #!/usr/bin/env python # coding=utf-8 import time import redis class RedisLock(object): def __in ...

  10. jmeter 测试restful接口

    jmeter 测试restful接口,JSON数据格式 1.添加线程组 2.添加HTTP信息头管理器 请求发送JSON数据格式参数,需要设置Content-Type为application/json ...