<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. HTTP 和FTP 状态信息总结（留着自己用）

    HTTP 状态信息 HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源H ...

  2. linux git的安装与使用

    一. Git安装. sudo apt-get install git 二.Git提交到远程仓. 1.到github或其coding(提供免费的私有仓)创建项目. 2.项目目录下初始化git. sudo ...

  3. tomcat作为服务器的配置

    tomcat在启动时,会读取环境变量的信息,需要一个CATALINA_HOME 与JAVA_HOME的信息,CATALINA_HOME即tomcat的主目录,JAVA_HOME即java安装的主目录, ...

  4. fenxi

    线路:通过定义而来(固定线路可以定义,随机和临时线路怎么来) 订单:线路上点对点的关系 装车单:同意线路上的车辆可以有多个订单组成的装车单 车辆任务:给调度接口输入车辆和订单集合,根据订单产生多个车的 ...

  5. 【前端】Ember.js学习笔记

    Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...

  6. 24-React Components组件

    Components 组件 1.组件 可以让UI独立的分割出来,可以让UI重复利用. 2.组件就像是JavaScript函数,它们能够接收任意的输入(称为"props",即属性)并 ...

  7. (收集)linux环境下乱码的解决方法

    **************************** 就是从数据库中取出来时,在存入linux的文件里时,在字符流时制定编码格式.代码如下: FileOutputStream fos=new Fi ...

  8. Latex图片显示问题(1)

    用latex编译后,若用dvipdf生成pdf文件,则其中有个eps图的左侧会显示不完全:若是用dvips--pspdf生成pdf文件,图像显示没问题. 这种情况的问题出在,加载 graphicx 宏 ...

  9. nginx ssl 更换问题

    公司之前使用的是免费startssl证书,听说IOS 以后不信任这些免费的验证不严格的证书,公司果断购买了一个统配域名证书,其实不用貌似也没什么事,主要是提交app的时候得说明理由,被拒的可能性比较大 ...

  10. maven多模块下使用JUnit进行单元测试

    1.选中需要进行测试的service类,右键->new->other->JUnit Test Case,如下图: 2.编写测试代码如下: AppServiceTest.java im ...