<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. 设置myeclipse新建jsp文件默认编码为UTF-8

    有三个地方需要改编码设置: 1. window-->preference-->general-->contenttype 然后在content types中展开每一个子项,并在Def ...

  2. java 内核

    摘自:http://www.cubrid.org/blog/tags/Java/

  3. Spring MVC上传文件

    Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...

  4. eclipse添加easyExport插件,打开本地文件

    下载地址:https://github.com/samsonw/OpenExplorer/downloads 官方:http://sourceforge.net/projects/easystruts ...

  5. 内置函数callable(object)

    如果对象object参数是可以调用的对象,就返回True:否则返回False.不过要注意的是,当一个对象是可以调用的,并不表示调用该对象时执行一定成功,但不可调用的对象去调用时一定不会成功.如果类对象 ...

  6. 微信小程序-视图数据绑定

    数据绑定 在逻辑层设置数据例如: Page({ data: { message: 'Hello MINA!' } })//设置了一个属性,名称是message 值为Hello MINA! 在视图显示数 ...

  7. [Python]实现简单决策树

    基本思路: 通过香农熵来决定每一层使用哪一种标签做分类,分类后,通过多数表决法来决定该层两个节点的类别.每次消耗一个标签,所以一共需要递归"标签个数"层. # -*- coding ...

  8. TFS二次开发系列：八、TFS二次开发的数据统计以PBI、Bug、Sprint等为例(二)

    上一篇文章我们编写了此例的DTO层,本文将数据访问层封装为逻辑层,提供给界面使用. 1.获取TFS Dto实例,并且可以获取项目集合,以及单独获取某个项目实体 public static TFSSer ...

  9. DAL.SQLHelper 的类型初始值设定项引发异常的处理

    这是DAL.SQLHelper的类中定义了sql连接字符串,但是在web.config中没有定义,在类判断获取的字符串是否为空,或是在web.config添加相应的连接字符串.

  10. C++ STL之vector用法总结

    介绍 vector是表示可变大小数组的序列容器. 就像数组一样,vector也采用的连续存储空间来存储元素.也就是意味着可以采用下标对vector的元素进行访问,和数组一样高效.但是又不像数组,它的大 ...