<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. Css样式基础

    1.Css的语法 CSS的语法主要由两个部分组成,一个是选择器,一个是属性. 选择器又分为以下几种: 1.元素选择器:即Html标签去掉括号的就是元素 2.类选择器:所谓的类就是说class=“名称” ...

  2. Father Christmas flymouse--POJ3160Tarjan

    Father Christmas flymouse Time Limit: 1000MS Memory Limit: 131072K Description After retirement as c ...

  3. 利用opencv训练样本分类

    参考:http://www.cnblogs.com/easymind223/archive/2012/07/03/2574826.html http://www.tuicool.com/article ...

  4. Android性能分析之TraceView的使用

    TraceView简介 TraceView是AndroidSDK里面自带的工具,用于对Android的应用程序以及Framework层的代码进行性能分析. TraceView是图形化的工具,最终它会产 ...

  5. js跳转

    window.location.reload(); //刷新当前页,参数保留

  6. Windows安装Scrapy遇坑解决办

    PS: Windows真心不适合开发.且行且珍惜.... 坑: error: Setup script exited with error: Microsoft Visual C++ 9.0 is r ...

  7. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  8. iPhone系列设备媒体查询：

    这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){ ...

  9. Python 安装Twisted 提示python version 2.7 required,which was not found in the registry

    由于我安装Python64位的,下载后没注册,安装Twisted时老提示“python version 2.7 required,which was not found in the registry ...

  10. Windows_RTM_RC

    1.https://zhidao.baidu.com/question/172764638.html RTM(Release to Manufacturing)版 软件在正式在零售商店上架前,需要一段 ...