jquery控制单个图层的显示与隐藏

最新推荐文章于 2022-08-15 10:30:36 发布
最新推荐文章于 2022-08-15 10:30:36 发布
阅读量2.4k 收藏
点赞数 
[html]<!doctype html>
<html>
<head>
 <meta charset="gbk" />
 <meta name="description" content="" />
 <title>demo</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <style>
  .showmore{ float:left;}
  .cont .aa {
  height: auto;
  width: 400px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  float: left;
  }
  .cont .aa .a1 {
  float: left;
  height: 30px;
  width: 300px;
  }
  .cont .aa .a2 {
  height: 30px;
  width: 350px;
  float: left;
  display:none;
  }
 </style>
</head>
<body>
<div class="cont">
 <div class="aa">
  <div class="a1">vbcvbcvbcvbcvbcvb</div>
  <div class="showmore"><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：谁丢发货刷老虎地方lsd回复烧烤等</div>
 </div>
 <div class="aa">
  <div class="a1">vbcvbcvbcvbcvbcvb</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：谁丢发货刷老虎地方lsd回复烧烤等</div>
 </div>
 <div class="aa">
  <div class="a1">vbcvbcvbcvbcvbcvb</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：谁丢发货刷老虎地方lsd回复[html]<!doctype html>
<html>
<head>
 <meta charset="gbk" />
 <meta name="description" content="" />
 <title>demo</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <style>
  .showmore{ float:left;}
  .cont .aa {
  height: auto;
  width: 400px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  float: left;
  }
  .cont .aa .a1 {
  float: left;
  height: 30px;
  width: 300px;
  }
  .cont .aa .a2 {
  height: 30px;
  width: 350px;
  float: left;
  display:none;
  }
 </style>
</head>
<body>
<div class="cont">
 <div class="aa">
  <div class="a1">vbcvbcvbcvbcvbcvb</div>
  <div class="showmore"><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：谁丢发货刷老虎地方lsd回复烧烤等</div>
 </div>
 <div class="aa">
  <div class="a1">vbcvbcvbcvbcvbcvb</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：谁丢发货刷老虎地方lsd回复烧烤等</div>
 </div>
 <div class="aa">
  <div class="a1">vbcvbcvbcvbcvbcvb</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：谁丢发货刷老虎地方lsd回复烧烤等</div>
 </div>
</div>
<script>
$(".showmore a span").click(function(e){
  $(this).html(["显示", "隐藏"][this.hutia^=1]);
  $(this.parentNode.parentNode).next().toggle();
  e.preventDefault();
});
</script>
</body>
</html>烧烤等</div>
 </div>
</div>
<script>
$(".showmore a span").click(function(e){
  $(this).html(["显示", "隐藏"][this.hutia^=1]);
  $(this.parentNode.parentNode).next().toggle();
  e.preventDefault();
});
</script>
</body>
</html>
我是一只猫一只猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery叫你怎样对图层进行隐藏和现实 一行代码超简单
永不停歇
03-28 2528
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 绑定事件  *{ margin:0; padding:0;}  #containter{ margin:60px; width:300px; border:1px solid #F00}  .head
jQuery动画效果鼠标经过图层显示隐藏图层
04-14
NULL 博文链接：https://guoqiantong.iteye.com/blog/1747019
层的显示与隐藏
shuang1226的专栏
09-05 117
js显示隐藏层 点击查看详细信息 打开的内容 点击查看详细信息 1、帅有个屁用!到头来还不是被卒吃掉! 2.不怕被人利用，就怕你没用。 3.人生自古谁无死，哪个拉*不用纸。 4.生的伟大，死在花下！ 5.有钱人终成眷属。 6.废话是人际关系的第一句。 7.只要锄头舞的好，那有墙角挖不倒？ 8.要在江湖混，最好是光棍！！...
JS图片显示与隐藏案例
mengfanshaoxia的博客
02-15 3323
一、案例需求 点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文 字变为隐藏。 二、案例分析 1、事件源：按钮（button） 2、事件类型：点击（onclick） 3、事件处理程序： （1）文字内容改变用：innerText （2）图片是否显示用：display 三、代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
jquery+css实现的图层居中
ITKE16830123的博客
06-27 233
有一个项目需要做一个图层居中显示效果，用jquery+css实现随窗口缩放，图层始终居中显示
roseProject:利用MVC结构支持的Backbone JS库构建的单个网页
05-18
路由器负责处理URL与应用程序状态之间的映射，使得SPA可以在不刷新整个页面的情况下，通过改变URL来导航不同的应用状态。 在**roseProject**中，开发者可能已经创建了自定义的模型、集合、视图和路由器，以适应特定...
基于Java的在线购物系统的设计与实现（源代码+系统）
最新发布
02-07
《基于Java的在线购物系统设计与实现》 在信息技术飞速发展的今天，电子商务已经成为人们日常生活中不可或缺的一部分。基于Java的在线购物系统以其高效、稳定、安全的特性，被广泛应用于各种电商平台的开发。本系统...
基于java的学校管理系统毕业设计与实现(源码+数据库).zip
06-16
11. **单元测试与集成测试**：使用JUnit或Mockito等工具进行单元测试，验证单个功能模块的正确性；而集成测试则确保各模块协同工作时的正确性。 12. **文档编写**：良好的文档记录是软件工程的重要组成部分，包括...
ASP.NET-WebAPI-as-Server-and-MVC-as-Client:使用ASP.NET Web API作为服务器，使用ASP.NET MVC作为客户端的单个表上的简单CRUD操作
04-29
在本项目中，我们将为单个表创建相应的API控制器，处理与该表相关的所有CRUD请求。 在ASP.NET Web API中，我们通常会创建一个名为`ApiController`的类，如`StudentsController`，然后在其中定义处理HTTP请求的方法...
使用高德地图Web服务-路径规划，用ArcGIS JS显示数据在天地图底图上
09-09
将这个图层添加到地图容器中，即可实现天地图的显示。 最后，确保HBuilder工程的配置正确，包括引用资源的路径、脚本的加载顺序等，确保整个应用能够正常运行。同时，为了提高用户体验，可以考虑添加动态加载、错误...
select实现div图层切换效果（jquery实现）
08-27
select实现div图层切换效果，使用jquery简单易懂、方便修改
jquery图片图层展开收缩效果.rar
07-10
jquery图片图层展开收缩效果，鼠标点击两个图片中间线条上的控制按钮，所在的图片区域会向右展开，再次点击则向左复位，也就是重新收回了，这种滑动的效果在jquery的优化下，非常的平滑流畅，用jquery实现这种效果非常容易。
jquery弹出div图层（带蒙板）
05-26
NULL 博文链接：https://hedahai119.iteye.com/blog/494349
threejs: layers实现图层的显示隐藏切换
九段刀客的博客
08-15 1481
threejs layers控制图层的显示隐藏
jquery 拖动图层
JIAYOUXIAOYI的专栏
10-23 2140
test     daqix.thirdparty.jquery.JQuery(document).ready(function(){        var $=daqix.thirdparty.jquery.JQuery;        var Drag=daqix.controller.abstractx.Drag;           
leaflet 图层管理（增加 、删除 、显隐控制）加载4326坐标系的图层（一）
weixin_44523653的博客
11-17 7703
加载4326坐标系 leaflet默认使用3857的坐标系，如果之前使用的是openlayers,会发现leaflet坐标写法和openlayers坐标相反，因为openlayers默认使用4326坐标系。 1、加载4326坐标系的地图 const map = L.map("map", { center: [35.8374, 104.28225],//维度在前，精度在后 zoom: 4, minZoom: 1, maxZoom: 19, zoo
html点击关闭层,jQuery浮动层点击图标按钮关闭或展开
weixin_42339759的博客
06-22 249
特效描述：浮动层 点击图标按钮 关闭或展开。jquery浮动层点击图标按钮关闭滑动提示浮动层，或展开滑动提示浮动层。一般用于网站的文字提示信息浮动层。代码结构1. 引入JS2. HTML代码$(document).ready(function(){function anim(duration){$('#mint').animate({height: 'toggle'},{duration: dur...
jQuery控制div的显示与隐藏
06-02
可以使用jQuery的`show()`和`hide()`方法来控制div的显示与隐藏。 例如，以下代码可以使id为“myDiv”的div在点击按钮时显示或隐藏： ```html <button id="myButton">点击我</button> <div id="myDiv">这是一个div</div> <script> $(document).ready(function(){ $("#myButton").click(function(){ $("#myDiv").toggle(); }); }); </script> ``` 在这个例子中，我们使用`click()`方法来添加一个点击事件处理程序，当按钮被点击时，`toggle()`方法会切换元素的可见性。所以，第一次点击按钮时，div会显示，再次点击按钮时，div会隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值