大佬们，求一串代码

从不吃馍 2017-10-13 12:41:00
我现在有<pre class="brush:html">此处省略5000字符</pre>标签，高度不固定。
求代码
当<pre>高度低于100px的时候，不做修改，当高度超过100px的时候，给pre赋值style="max-height:100px;overflow:hidden;"，并在pre的底部显示“显示全部内容”，点击文字钮就把style="max-height:100px;overflow:hidden;"移除，这样就能显示<pre>全部的内容。
总结来说，就是我pre内容如果太多，超过了100px高度，就把per设置最大高度max-height:100px;并禁止滚动条，此时点击“阅读全部”文字，则移除style，并隐藏“阅读全部”这几个字

有没有哪个老铁有现成的案例或者代码，先行谢过。
...全文
201 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
从不吃馍 2017-10-13
  • 打赏
  • 举报
 回复
引用 4 楼 qq_32661557 的回复:
[quote=引用 2 楼 qq_33992806 的回复:] [quote=引用 1 楼 qq_32661557 的回复:] 

<html>
<head>
    <style>
        .test {
            max-height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<pre class="brush:html test" id='pre'><div id="test">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></div></pre>
    <input type="button" onclick="show();" id='btn' style="display:none;" value="点击显示更多" />
</body>
<script>
    var oDiv = document.getElementById('test');
    var btn = document.getElementById('btn');
    if (oDiv.offsetHeight > 100) {
        btn.style.display = 'block';
    }
    function show() {
        var elements = document.getElementById('pre');
        var cName = "test";
        elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
    }
</script>
</html>
谢大佬，不过还有个问题，点击显示更多这个按钮我点击一次之后就消失怎么弄，也就是随着<pre>的展开同时消失 另外 这个input按钮我把onclick="show();" 写到<span>会有效吗[/quote] 

<html>
<head>
    <style>
        .test {
            max-height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<pre class="brush:html test" id='pre'><div id="test">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></div></pre>
    <input type="button" onclick="show(this);" id='btn' style="display:none;" value="点击显示更多" />
</body>
<script>
    var oDiv = document.getElementById('test');
    var btn = document.getElementById('btn');
    if (oDiv.offsetHeight > 100) {
        btn.style.display = 'block';
    }
    function show(e) {
        var elements = document.getElementById('pre');
        var cName = "test";
        elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
		e.style.display = 'none';
    }
</script>
</html>
onclick="show();" 写到<span>标签内也有效[/quote] 谢谢(#^.^#)
从不吃馍 2017-10-13
  • 打赏
  • 举报
 回复
引用 3 楼 Ragin 的回复:
一楼的在show()方法加段代码就可以让按钮消失了 

function show() {
document.getElementById('btn').style.display='none';
//其他代码不变
}
或者jquery 

<!DOCTYPE html>
<html>
<head>
<script src="http://www.17sucai.com/preview/1/2017-09-25/swiperTab/js/jquery.min.js"></script>
</head>
<body>
<pre class="brush:html">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></pre>
    <input type="button" id='btn' style="display:none;" value="点击加载更多" />
</body>
<script>
    $(function(){
		if ($('pre').height() > 100) {
			$('#btn').show();
			$('pre').css({'max-height': '100px','overflow': 'hidden'});
		}
		
		$('#btn').on('click', function(){
			$(this).hide();
			$('pre').css({'max-height': '','overflow': ''});
		})
	})
</script>
</html>
谢谢(#^.^#)
Braska 2017-10-13
  • 打赏
  • 举报
 回复
一楼的在show()方法加段代码就可以让按钮消失了 

function show() {
document.getElementById('btn').style.display='none';
//其他代码不变
}
或者jquery 

<!DOCTYPE html>
<html>
<head>
<script src="http://www.17sucai.com/preview/1/2017-09-25/swiperTab/js/jquery.min.js"></script>
</head>
<body>
<pre class="brush:html">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></pre>
    <input type="button" id='btn' style="display:none;" value="点击加载更多" />
</body>
<script>
    $(function(){
		if ($('pre').height() > 100) {
			$('#btn').show();
			$('pre').css({'max-height': '100px','overflow': 'hidden'});
		}
		
		$('#btn').on('click', function(){
			$(this).hide();
			$('pre').css({'max-height': '','overflow': ''});
		})
	})
</script>
</html>
本人QQ-554433626 2017-10-13
  • 打赏
  • 举报
 回复
引用 2 楼 qq_33992806 的回复:
[quote=引用 1 楼 qq_32661557 的回复:] 

<html>
<head>
    <style>
        .test {
            max-height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<pre class="brush:html test" id='pre'><div id="test">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></div></pre>
    <input type="button" onclick="show();" id='btn' style="display:none;" value="点击显示更多" />
</body>
<script>
    var oDiv = document.getElementById('test');
    var btn = document.getElementById('btn');
    if (oDiv.offsetHeight > 100) {
        btn.style.display = 'block';
    }
    function show() {
        var elements = document.getElementById('pre');
        var cName = "test";
        elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
    }
</script>
</html>
谢大佬，不过还有个问题，点击显示更多这个按钮我点击一次之后就消失怎么弄，也就是随着<pre>的展开同时消失 另外 这个input按钮我把onclick="show();" 写到<span>会有效吗[/quote] 

<html>
<head>
    <style>
        .test {
            max-height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<pre class="brush:html test" id='pre'><div id="test">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></div></pre>
    <input type="button" onclick="show(this);" id='btn' style="display:none;" value="点击显示更多" />
</body>
<script>
    var oDiv = document.getElementById('test');
    var btn = document.getElementById('btn');
    if (oDiv.offsetHeight > 100) {
        btn.style.display = 'block';
    }
    function show(e) {
        var elements = document.getElementById('pre');
        var cName = "test";
        elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
		e.style.display = 'none';
    }
</script>
</html>
onclick="show();" 写到<span>标签内也有效
从不吃馍 2017-10-13
  • 打赏
  • 举报
 回复
引用 1 楼 qq_32661557 的回复:

<html>
<head>
    <style>
        .test {
            max-height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<pre class="brush:html test" id='pre'><div id="test">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></div></pre>
    <input type="button" onclick="show();" id='btn' style="display:none;" value="点击显示更多" />
</body>
<script>
    var oDiv = document.getElementById('test');
    var btn = document.getElementById('btn');
    if (oDiv.offsetHeight > 100) {
        btn.style.display = 'block';
    }
    function show() {
        var elements = document.getElementById('pre');
        var cName = "test";
        elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
    }
</script>
</html>
谢大佬，不过还有个问题，点击显示更多这个按钮我点击一次之后就消失怎么弄，也就是随着<pre>的展开同时消失 另外 这个input按钮我把onclick="show();" 写到<span>会有效吗
本人QQ-554433626 2017-10-13
  • 打赏
  • 举报
 回复 

<html>
<head>
    <style>
        .test {
            max-height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<pre class="brush:html test" id='pre'><div id="test">此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符
此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br />此处省略5000字符<br /></div></pre>
    <input type="button" onclick="show();" id='btn' style="display:none;" value="点击显示更多" />
</body>
<script>
    var oDiv = document.getElementById('test');
    var btn = document.getElementById('btn');
    if (oDiv.offsetHeight > 100) {
        btn.style.display = 'block';
    }
    function show() {
        var elements = document.getElementById('pre');
        var cName = "test";
        elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
    }
</script>
</html>
一秒变成黑客大佬，让妹子对你无法自拔，你只需要学会这个代码
黑客在我们的印象中，永远只是科幻电影中的情节。不过大家对于黑客的崇拜却是非常高的！尤其是妹子，可以说妹子对于黑客是完全没有抵抗力的，很多陷入热恋中的男生，都想炫耀一下自己的电脑技术，去捕获妹子的芳心。下面小编就向大家介绍一段代码，让你一秒变成黑客大佬！1.首先我们用win+R组合键打开系统命令窗口，然后在系统命令窗口中输入cmd，然后点击回车键进入编辑窗口小编是一个有着5年开发经验的C++程序员，关于C++，自己有做材料的整合，一个完整的学习C++的路线，学习材料和工具。能够进我的。裙。里；–先2635。
优化了一下大佬们写的网易云ncm音频格式转flac格式的代码
优化了一下大佬们的ncm转flac代码，有需要的可以爬下来
【数据结构】求字符串类型数学表达式的值
文章目录一、前言二、问题三、餐前开胃四、源码地址五、思路：1、数字栈需要注意的问题2、符号栈需要注意的问题六、流程图七、核心代码八、总结 一、前言 最近在开发中遇到一个场景，用户输入一个字符串，这个字符串是一个数学计算式，让求出计算的结果 久闻大佬们经常提起，可以利用栈将一个字符串形式的数学表达式，计算得出最终的结果，于是乎，小编利用自己的一把头发，终于将其实现了出来。 二、问题 计算器这个东西，相信不管是女士们，先生们，老人，孩子，还是叔叔大爷应该都有听过，都见过，都用过，大家可能会有下面这些问题：
大佬们，求。编写函数，判断一个数字是否为素数（质数），是则返回字符串YES，否则返回字符串NO。
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
25条很棒的Python一行代码，太赞了！
自从我用Python编写第一行代码以来，就被它的简单性、出色的可读性和特别流行的一行代码所吸引。在下面，我将给大家介绍并解释一些Python一行程序。可能有些你还不知道，但对你未来的Python项目很有用。
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章