<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. python 随机生成固定长度的字串

    from random import Random#随机生成4到20位的用户名def random_username(): username = '' chars = 'AaBbCcDdEeFfGgH ...

  2. Network of Schools --POJ1236 Tarjan

    Network of Schools Time Limit: 1000MS Memory Limit: 10000K Description A number of schools are conne ...

  3. ABAP SPLIT

    注意: 假定'\'为分隔符 * '1'会分成1部分,值为1 * 分隔符之前的即使是空白或没有,也算一部分. 最后一个分隔符之后的,若有值会算一部分.若没有值,则不会算 比如'\1\'会分成2部分 '\ ...

  4. android listview simpleAdaper

    xml (主) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns: ...

  5. App瘦身

    http://www.zoomfeng.com/blog/ipa-size-thin.html https://github.com/ming1016/SMCheckProject

  6. 7. Swift 基于Xmpp和openfire实现一个简单的登录注册

    1. 基本步骤:首先导入Xmpp框架,配置环境 ->由于我们使用的是OC的Xmpp框架,再进行Swift开发时需要进行桥接. 具体方法就是创建一个基于c的.h的头文件,然后将我们需要编译OC的语 ...

  7. CFNetwork的错误代码参考

    所有的错误代码是在对“CFNetwork的错误代码参考” 小提取CFURL和CFURLConnection错误: kCFURLErrorUnknown = -998, kCFURLErrorCance ...

  8. OpenCV从入门到放弃系列之——如何扫描图像、利用查找表和计时

    目的 如何遍历图像中的每一个像素? OpenCV的矩阵值是如何存储的? 如何测试我们所实现算法的性能? 查找表是什么?为什么要用它? 测试用例 颜色空间缩减.具体做法就是:将现有颜色空间值除以某个输入 ...

  9. 剑指offer五:

    输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. /* public class ListNode { int val; ListNode next = n ...

  10. 安卓CPU性能测试

      步骤1.adb shell (进入linux的底层) 步骤2.echo 3>/proc/sys/vm/drop_caches(清除系统cache) 步骤3.top -d 1|grep com ...