1. 需要对bootstrap的“css”“js”进行引入
2. <link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet" />
3. <script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.js"></script>
4. <!-- 注意:如果你直接复制所有代码到本地,上述路径需要改成你本地的 -->
5. <body style="background:#f6f6f6;margin:10px;">
6. @*进货报表*@
7. <div style="width:145px;height:50px;">
8. <div style="width:104px;border-radius:5px; height:30px;margin-top:8px;margin-right:10px; border:1px solid;color:#b0aeae;float:right;">
9. <a href="javascript:;" id="gdhdj">展开统计数据</a>
10. </div>
11. </div>
12. <div class="csvs" id="csvs"style="width:200px;">
13. <div style="width:20%;height:85px;float:left;">
14. <p style="margin-top:15px;color:#808080;">进货笔数</p>
15. </div>
16. <div style="width:20%;height:85px;float:left;border-left:1px solid;color:#808080;">
17. <p style="margin-top:15px;">进货总额</p>
18. </div>
19. <div style="width:60%;height:85px;float:left;border-left:1px solid;color:#808080;">
20. <p style="float:left;margin-top:15px;">进货额最高的商品:</p>
21. <p style="margin-top:15px;">供货额最高的供应商:</p>
22. </div>
23. </div>
24. <script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.js"></script>
25. @*导航条,展开,收起*@
26. <script>
27. // JavaScript Document
28. //1.页面加载
29. window.onload = function () {
30. //2.获取页签索引的变量
31. var index = 0;
32. // @*展开,收起*@
33. var csvs = document.getElementById("csvs");
34. var gdhdj = document.getElementById("gdhdj");
35. var timer;
36. var h = 1;
37. //绑定鼠标单击事件
38. gdhdj.onclick = function () {
39. //动画展开
40. if (gdhdj.innerHTML === "展开统计数据") {
41. csvs.style.height = 85 + "px";
42. gdhdj.innerHTML = "收起统计数据";
43. }
44. //动画收起
45. else if (gdhdj.innerHTML === "收起统计数据") {
46. csvs.style.height = 1 + "px";
47. gdhdj.innerHTML = "展开统计数据";
48. }
49. };
50. }
51. </script>
52. </body>
53. 完成的效果实例
原生JS设置展开与收起
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.