<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{margin:0; padding:0;}

		.box{ width: 600px; margin: 0 auto; }

		.p1{ width: 200px; height: 30px; line-height: 30px; text-align: center; background: #B73A3A; color: #fff;}

		.content{ border:1px solid #ddd; width: 180px; height: 200px; padding:10px; display: none;}

	</style>

</head>

<body>

<div class="box">

	<p class="p1" onclick="var oDiv = document.getElementById('J_content');(oDiv.style.display == 'block')?(oDiv.style.display = 'none'):(oDiv.style.display = 'block')" >点击</p>

	<div class="content" id="J_content">

		<p>了更健康的就感慨了结果聊看看发几个六块腹肌刚看了发几个及关联方寄过来的加工费</p>

	</div>

</div>

</body>

</html>

　　如图所示：

展开效果图：

第二：jQuery的写法：

html:

<div class="result_list_more" id="showMore"><a href="javascript:void(0)">展开全部</a></div>

js：

$(function(){

    let dnum = 0;

    let showMore = $("#showMore");//更多

    let resultList = $("#resultList"); //外层

    showMore.find("a").on("click",function(){

        dnum = dnum + 1;

        if(dnum % 2 != 0){

            resultList.css("height", "auto");

            $(this).addClass("result_rotate").html("收起全部")

        }else{

            resultList.css("height", "1rem");

            $(this).removeClass("result_rotate").html("展开全部")

        }

    })

})

css:

/* 展开更多 */

.result_list_more{ height: 0.5rem; line-height: 0.5rem; background-color: #fff; overflow: hidden; text-align: center}

.result_list_more a{ position: relative; display: inline-block; text-indent: -0.2rem; font-size: 0.18rem;}

.result_list_more a::after{ content: ""; position: absolute; right: -0.2rem; top:0.158rem; font-size: 0.18rem;

width: 0.1rem; height: 0.1rem; border-top:2px solid #333; border-right: 2px solid #333;

-ms-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-webkit-transform:rotate(135deg);

-o-transform:rotate(135deg);

transform:rotate(135deg);}

.result_list_more .result_rotate::after{top:0.24rem;

-ms-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-webkit-transform:rotate(-45deg);

-o-transform:rotate(-45deg);

transform:rotate(-45deg);}

效果图：

原生态js单个点击展开收缩的更多相关文章

  1. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

  2. --@angularJS--指令之单个点击展开demo

    1.expander.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title&g ...

  3. vue.js 实现点击展开收起动画

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...

  4. js按钮点击展开收起

    $('.tab').click(function(){ var index = $('.tab').index(this), //缓存第一次点击的li的索引值 ele = $(this).find(' ...

  5. JS 实现点击展开菜单

    1: 获取事件源的两种方式 2: overflow 控制展现 <%@ page language="java" import="java.util.*" ...

  6. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  7. js 实现内容的展开和收缩

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 点击UITableView的cell展开收缩

    在项目中有个需求,点击表视图的单元格展开,再点击另外一个单元格或者本身又收缩,经过一段时间尝试,实现了该功能,现在记录分享总结下.   首先要理解UITableView代理方法调用的先后顺序.   当 ...

  9. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

随机推荐

  1. 关于junit包导入不了但是maven本地库中却存在的问题

    导入项目的时候发现junit的类使用不了,于是就去看看包导入了没有 发现包是灰色的,于是猜想可能是maven本地库中包没下载过来 查询了本地库发现包是存在的,这就奇怪的,经过网上查询之后得到解决方案 ...

  2. Java服务器工程师任职资格

    Java服务器端开发工程师 1.Java服务器端3年以上开发经验 2.至少一个完整游戏项目经验 3.熟练掌握OOA.OOD.OOP 4.掌握常见网游协议开发方法 5.对TCP/IP有深入了解 6.对消 ...

  3. 前端开发之JavaScript HTML DOM理论篇二

    主要内容: 1.HTML DOM元素 2.HTML DOM事件 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素  (1)方法一: appendChild() 追加 如 ...

  4. ROS Learning-032 （提高篇-010 Launch）Launch 深入研究 --- （启动文件编程）ROS 的 XML语法简介

    ROS 提高篇 之 Launch 深入研究 - 01 - 启动文件的编程 - ROS 的 XML语法简介 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubu ...

  5. wsl命令行

    参考: https://docs.microsoft.com/en-us/windows/wsl/about 查看已安装 wslconfig /l /all 重装 wslconfig /u debia ...

  6. windows server2012安装mysql时一直停留在start server的解决方法

    安装的时候,starting server 卡住 原因分析 这个问题小编安装mysql时也碰到过,出现这个问题是my.ini文件没有复制成功了,我们只要在mysql安装目录把把目录中的备份的my-sm ...

  7. srand()、rand()、time()函数的用法

    srand()就是给rand()提供种子seed. 如果srand每次输入的数值是一样的,那么每次运行产生的随机数也是一样的. 以一个固定的数值作为种子是一个缺点.通常的做法是 :以这样一句srand ...

  8. SIP简介

    说明:以下内容来着之前下载的一份文档,现将概念部分摘录在BLog,如需要完整文档将放在文件中或留言. SIP简介,第1部分:SIP初探 时间:2006-04-07作者:Emmanuel Proulx浏 ...

  9. org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'deptDao_a' defined in class path resource [beansAndHibernate.xml]: Cannot resolve reference to bean 'sessionFact

    Error creating bean with name 'deptDao_a' defined in class path 因为更改了类的名字,所以其setter方法没有更改,需要 private ...

  10. WordPaster2项目变化

    1.1.1. jsp 1.引入json2.min.js 2.控件名称改为WordPasterManager 3.文件保存逻辑更新,直接使用控件生成的文件名称 1.1.2. asp.net 1.引入js ...