jquery默认隐藏一部分内容,点击展开显示更多

2018-04-10 1,040 浏览 8 点赞

这个功能其实很容易实现，思路和步骤：

1、把要显示的原样输出，作为更多要隐藏的内容你就用style=”display:none”属性把它先隐藏；

2、给查看更多绑定点击事件，点击后show你要展示的内容；

实际代码如下：html 代码

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            测试
        </title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    </head>
    <body>
        <div>
           我是展示的第一部分
           <div id = "showdiv" style="display:none;">我是隐藏的那部分</div>
           <a href="#" onclick="showHideCode()">查看更多</a>
        </div>
    </body>
</html>

Jquery代码：

<script type="text/javascript">
          function showHideCode(){
             $("#showdiv").toggle();
          }
</script>