点击切换详情显示

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>鼠标滑过显示详情</title>
  6. <!-- IMPORT CSS -->
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. .box {
  13. box-sizing: border-box;
  14. margin: 20px auto;
  15. width: 200px;
  16. height: 40px;
  17. line-height: 40px;
  18. text-align: center;
  19. border: 1px solid lightcoral;
  20. position: relative;
  21. /* 设置鼠标是一个小手 */
  22. cursor: pointer;
  23. }
  24. .box .detail {
  25. /* display: none; */
  26. position: absolute;
  27. right: -1px;
  28. top: 38px;
  29. z-index: -1;
  30. box-sizing: border-box;
  31. width: 500px;
  32. height: 100px;
  33. line-height: 100px;
  34. text-align: center;
  35. border: 1px solid lightcoral;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="box" id="box">
  41. <span>购物车</span>
  42. <div class="detail" id="detail" style="display: none">
  43. 购物车的相关信息
  44. </div>
  45. </div>
  46. <!--
  47. 传统基于操作 DOM 的方式实现业务需求
  48. 1. 想操作谁就先获取谁
  49. 2. 给某元素绑定某事件
  50. 3. 在事件触发的时候修改元素的样式等
  51. -->
  52. <!-- IMPORT JS -->
  53. <script>
  54. /* // document.getElementById([ID]):在整个文档中,通过元素的 ID 获取到当前这个元素对象
  55. let box = document.getElementById('box');
  56. let detail = document.getElementById('detail');
  57. // 元素对象 .onxxx=function(){}:事件绑定,xxx 事件类型(click / mouseover / mousedown /
  58. keydown...)
  59. box.onclick = function () {
  60. // 元素对象 .style.xxx=xxx:修改元素的某一个样式值(操作的是元素行内样式,所以如果我们没有把样式
  61. 写在行内上,在 JS 中基于 .style.xxx 的方式是无法获取到样式的)
  62. // 1.首先获取 DETAIL 原有的样式(显示还是隐藏):元素 .style.xxx 就是获取某一个样式 (前提:
  63. 需要在元素行内设置这个样式才能获取到)
  64. let n = detail.style.display;
  65. if (n === 'none') {
  66. // 当前是隐藏的,我们让其显示
  67. detail.style.display = 'block';
  68. box.style.borderBottomColor = '#FFF';
  69. }else{
  70. // 当前是显示的,我们让其隐藏
  71. detail.style.display = 'none';
  72. box.style.borderBottomColor = 'lightcoral';
  73. }
  74. } */
  75. </script>
  76. <script>
  77. let box = document.getElementById('box');
  78. let detail = document.getElementById('detail');
  79. box.onclick = function () {
  80. let n = detail.style.display;
  81. if (n === 'none') {
  82. detail.style.display = 'block';
  83. box.style.borderBottomColor = '#FFF';
  84. }else{
  85. detail.style.display = 'none';
  86. box.style.borderBottomColor = 'lightcoral';
  87. }
  88. }
  89. </script>
  90. </body>
  91. </html>