<html>

    <head>

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

    </head>

    <body>

        <div>

            <span class="color">深咖色</span>

            <div class="cc"></div>

        </div>

        <div>

            <span class="size">11*11</span>

            <div class="bb"></div>

        </div>

    </body>

</html>
            
 .color,.size{  font-size:14px; color:black;}

 .cc{ width:300px;height:100px;background:red;}

 .bb{ width:300px;height:100px;background:red;}

第一种是简单的显示和隐藏，使用了bind（）和toggle（）；

 $(function(){

      $(".color").bind("click",function(){ $(this).next(".cc").toggle();});

      $(".size").bind("click",function(){ $(this).next(".bb").toggle();});

 });

toggle()方法自己就有显示隐藏的作用。

但是这段js的缺点是，当我点击“深咖色”显示红色方块，再次点击“11*11”时，绿色方块出现，但是红色方块也不会隐藏，如图：

第二种方法：改进上述的缺点，当再次点击时，隐藏其他，只出现点击出现的相应内容。

$(function(){
　　$(".color").bind("click",function(){

      $(this).next(".cc").show();

      $(".bb").hide();

    });

       $(".size").bind("click",function(){

      $(this).next(".bb").show();

       $(".cc").hide();

   });

  });

第三种，在第二种的基础上添加，当点击显示时，出现相应内容，点击其他消失，或者点击其他空白处消失。

  $(function(){

    $(".color").bind("click",function(){

      $(this).next(".cc").show();

      $(".bb").hide();

    });

       $(".size").bind("click",function(){

      $(this).next(".bb").show();

       $(".cc").hide();

   });

$(".color").on("click", function(e){

    $(document).one("click", function(){

        $(".cc").hide();

      $(".bb").hide();

    });

    e.stopPropagation();

});

$(".cc").on("click", function(e){

    e.stopPropagation();

});

$(".size").on("click", function(e){

    $(document).one("click", function(){

        $(".bb").hide();

    $(".cc").hide();

    });

    e.stopPropagation();

});

$(".bb").on("click", function(e){

    e.stopPropagation();

});

 });

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

jQuery 点击显示再次点击隐藏的更多相关文章

  1. vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）

    效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的  这个方法里传递的index 对应  isShow 数组里的index  ,对 ...

  2. JQuery 浮动DIV显示提示信息并自动隐藏

    /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...

  3. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  4. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  6. jQuery点击按钮实现div的隐藏和显示切换效果

    <script type="text/javascript"> $(function(){ $('#click_event').click(function(){  i ...

  7. js点击显示隐藏

    这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...

  8. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  9. js如何实现点击显示和隐藏表格

    js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

随机推荐

  1. [比较老的文章]三维渲染引擎 OGRE 与 OSG 的比较综述

    1 .引言随着计算机可视化.虚拟现实技术的飞速发展,人们对实时真实感渲染以及场景复杂度提出了更高的要求.传统的直接使用底层图形接口如OpenGL.DirectX开发图形应用的模式越来越暴露出开发复杂性 ...

  2. python :模态对话框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. greenDAO3 基本使用

    greenDAO3基本使用 greenDAO3开始使用注解的方式定义实体类(entity),并且是通过安装gradle插件来生成代码.之前的版本则是通过建立一个独立的Java-lib工程来存放生成的文 ...

  4. jQuery easyui 扩展form插件的三个方法

    $.extend($.fn.form.methods, { serialize: function(jq){ var arrayValue = $(jq[0]).serializeArray(); v ...

  5. iOS常见面试题

    一.为什么要在主线程中更新UI,这样做有什么好处? UIKit中的大部分类都不是“线程安全”的,为了解决这个线程不安全的问题,苹果推荐所有应用程序的UI操作都在主线程中执行,这样就不会出现多个线程同时 ...

  6. 3.UIViewController详解

     一. UIViewController,视图控制器,它是UIKit中非常重要的组成部分.它由控制器+View两部分组成. 控制器功能: ->实现代码逻辑,决定它自带的View的界面显示. -& ...

  7. 获取div或者元素相对于屏幕坐上角的绝对位置

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

  8. boldSystemFontOfSize 和 systemFontOfSize 的区别

    使用 UIFont 的下列方法: + systemFontOfSize + boldSystemFontOfSize + italicSystemFontOfSize p.p1 { margin: 0 ...

  9. mysql 语句的索引和优化

    一.基本语句优化 1.尽量避免在列上进行运算,这样会导致索引失败.例如: select * from table where DATE_FORMAT(`customer_regtime`,'%Y')& ...

  10. 用FileInputStream实现文本复制

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; /* * 用f ...