沙盒/css测试2

返回顶部
返回底部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Sidebar</title>
    <style>
      #sidebar::before {
        content: var(--before-content, "显示窗口");
        position: absolute;
        width: 15px;
        top: 20px;
        right: 100px;
        padding: 5px;
        background-color: #007BFF;
        color: white;
        border: none;
        cursor: pointer;
        z-index: 1000;
        line-height: 1.25;
        font-size: 14px;
      }
      
      #sidebar {
        position: fixed;
        top: 0;
        width: 100px;
        background-color: #f4f4f4;
        transition: right 0.3s ease;
        z-index: 1000;
      }
      
      #sidebar.hidden {
        right: -100px;
      }
      
      #sidebar.visible {
        right: 0;
      }
      
      #sidebar-content {
        padding: 10px;
      }
    </style>
</head>
<body>
    <div id="sidebar" class="hidden">
      <div id="sidebar-content">
        <p>内容.</p>
      </div>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var sidebar = document.getElementById('sidebar');
        var beforeContent = sidebar.style.getPropertyValue('--before-content');
        var rect = sidebar.getBoundingClientRect();
        
        sidebar.addEventListener('click', function (event) {
          var x = event.clientX;
          var y = event.clientY;
          
          if (x < rect.left) {
            sidebar.classList.toggle('visible');
            sidebar.classList.toggle('hidden');
            if (beforeContent == "显示窗口") {
              sidebar.style.setProperty('--before-content', '"隐藏窗口"');
            } else {
              sidebar.style.setProperty('--before-content', '"显示窗口"');
            }
          }
        });
      });
    </script>
</body>
</html>