点击切换详情显示

  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');
  58.         // 元素对象 .onxxx=function(){}：事件绑定，xxx 事件类型（click / mouseover / mousedown / 
  59.     keydown...）
  60.         box.onclick = function () {
  61.         // 元素对象 .style.xxx=xxx：修改元素的某一个样式值（操作的是元素行内样式，所以如果我们没有把样式
  62.     写在行内上，在 JS 中基于 .style.xxx 的方式是无法获取到样式的）
  63.         // 1.首先获取 DETAIL 原有的样式（显示还是隐藏）：元素 .style.xxx 就是获取某一个样式 （前提：
  64.     需要在元素行内设置这个样式才能获取到）
  66.             let n = detail.style.display;
  67.             if (n === 'none') {
  68.                 // 当前是隐藏的，我们让其显示
  69.                 detail.style.display = 'block';
  70.                 box.style.borderBottomColor = '#FFF';
  71.             }else{
  72.                 // 当前是显示的，我们让其隐藏
  73.                 detail.style.display = 'none';
  74.                 box.style.borderBottomColor = 'lightcoral';
  75.             }
  76.         } */
  77.     </script>
  78.     <script>
  79.         let box = document.getElementById('box');
  80.         let detail = document.getElementById('detail');
  81.         box.onclick = function () {
  82.             let n = detail.style.display;
  83.             if (n === 'none') {
  84.                 detail.style.display = 'block';
  85.                 box.style.borderBottomColor = '#FFF';
  86.             }else{
  87.                 detail.style.display = 'none';
  88.                 box.style.borderBottomColor = 'lightcoral';
  89.             }
  90.         }
  91.     </script>
  92. </body>
  93. </html>