zoukankan      html  css  js  c++  java
  • 博客园之MD文件代码块添加隐藏/显示按钮

    点击显示代码↓

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    </body>
    <script>
        // 高度大于600的添加滚动条
        // $('pre').each(function (ind, dom) {
        //     if ($(dom).css('height').slice(0, -2) > 600) {
        //         $(dom).css('height', '600px');
        //         $(dom).css('overflow', 'auto');
        //     }
        // })
    
        // 高度大于600的添加显示隐藏按钮
        $('pre').each(function (ind, dom){
            if ($(dom).css('height').slice(0, -2) > 500) {
                var mybtn = document.createElement('button');
                $(mybtn).html('↓ShowCode↓');
                $(mybtn).css({'border-radius': '4px','background-color':'lightblue','cursor':'pointer','border-color':'lightblue'});
                $(mybtn).insertBefore($(dom));
                $(dom).css('display', 'none');
                $(mybtn).click(function () {
                    if($(mybtn).html()=='↓ShowCode↓'){
                        $(dom).css('display', 'block');
                        $(mybtn).html('↓CloseCode↓');
                    }else {
                        $(dom).css('display', 'none');
                        $(mybtn).html('↓ShowCode↓');
                    }
                })
            }
        });
    </script>
    
    </html>
    
  • 相关阅读:
    模板笔记2
    模板笔记
    qt打包可执行文件
    合并单独的视频和音频
    模板1
    mysql 数据表中查找重复记录
    mysql左连接右连接(查询两张表不同的数据)
    mysql--构造数据、导入导出
    mysql安装
    linux下启动tomcat服务
  • 原文地址:https://www.cnblogs.com/zyyhxbs/p/11426282.html
Copyright © 2011-2022 走看看