jquery点击显示隐藏块

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击显示块</title>
<script src="script/jquery-2.1.4.js"></script>            //引入jquery模块
<style>                                                                          //设置初始样式
       p{margin:0;padding:0;}
       .content{width:400px;margin:0 auto;border: 1px solid #000;}
       #btn{width:100%;height: 30px; line-height: 30px;background-color: #666;cursor: pointer;}
       .txt{padding: 10px; text-indent:24px; display:block;}
</style>
</head>
<body>

<div class="content">

      <p id="btn">点击</p>

      <div class="txt">

         CSS visibility 属性规定元素是否可见。visible 元素可见。hidden元素不可见。collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元 素上,会呈现为 "hidden"。inherit 从父元素继承 visibility 属性的值。

  <div>
</div>


<script>
$(function(){                                                        //定义jquery函数方法
         $("#btn").bind("click",function(){                  //给#btn按钮绑定点击事件
            if($(this).next().is(":visible")){                //如果这个按钮的下一个元素节点是显示状态,那么点击它会将他的下一个同辈元素隐藏。
                 $(this).next().hide();                           //css的visibility属性的hidden与visible分别控制元素的隐藏与显示
           }else{                                                      //反之,将其显示。
                 $(this).next().show();
           }

})
})
</script>

</body>
</html>

运行效果如图

时间: 2024-10-05 09:18:16

jquery点击显示隐藏块的相关文章

jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <!-- 收缩展开效果 --><li class=&

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

点击显示隐藏div 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text

HTML5--》点击显示隐藏内容

<details>浏览器支持比较差,可以用JavaScript实现这种功能. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js点击显示隐藏内容</title> 6 <style type="text/css" > 7 body{font-size:12px;} 8 span{f

js 事件点击 显示 隐藏

1 <div style="position:absolute;left:40%;top:10%;border-style:dotted"> 2 <img src="zgl.jpg"/><br/> 3 <center> 4 <input type="button" value="隐藏"/> 5      6 <input type="button&qu

css样式一开始不显示,点击显示隐藏

先隐藏在字段里写style="display:none" 点击显示隐藏 $(".a").click(function(){ if($("#aa").css("display")=="none"){ $("#aa").show(); }else{ $("#aa").hide(); } }); 替换属性 先设置好class名字 $("#btn2").a

jQuery 点击显示再次点击隐藏

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <div> <span class="color">深咖色</span> <div class="cc"></div

CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"> here are some test words </div> <div id="button">点击显示</div> 假设使用position:absolute和top-9999px控制点隐藏 .holi{ width: 200px; heigh

jquery 点击显示更多

点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent"> <div class="img"> <img src="/uploads/image/20190411/d5ec13bdf0fcb9eaa8cf265d94fe6035.png" /> </div> <div clas

Jquery点击事件隐藏显示菜单

显示的效果就是这样,点击菜单,显示自己菜单下的内容,其他菜单下的都隐藏 html代码如下 1 <div> 2 <ul class="menu"> 3 <li class="leav"> 4 <a href="#">衬衫</a> 5 <ul class="leave"> 6 <li> 7 <a href="javascript:v