可响应式三栏页面：点击隐藏侧边栏实现方案问询

Got it! I’ll walk you through a complete implementation to replicate that collapsible sidebar layout (with smooth slide-in/out behavior and expanding content area) just like the SAP help page you mentioned. We’ll use plain HTML, CSS, and include both vanilla JavaScript and jQuery options so you can pick what fits your comfort level. Let’s break it down step by step:

1. Basic HTML Structure #

First, we’ll set up a flex-based layout with three core parts: a toggle button, the collapsible sidebar, and the main content area.

<div class="page-container">
  <!-- Toggle Button -->
  <button id="sidebar-toggle" class="toggle-btn">&lt;&lt;</button>

  <!-- Sidebar -->
  <aside id="sidebar" class="sidebar">
    <div class="sidebar-content">
      <h3>Navigation</h3>
      <ul>
        <li><a href="#">Section 1</a></li>
        <li><a href="#">Section 2</a></li>
        <li><a href="#">Section 3</a></li>
        <li><a href="#">Section 4</a></li>
      </ul>
    </div>
  </aside>

  <!-- Main Content Area -->
  <main id="main-content" class="main-content">
    <h1>Main Content</h1>
    <p>This area will expand automatically when the sidebar is collapsed, just like the SAP help page.</p>
    <p>Add your actual documentation, text, or media content here.</p>
  </main>
</div>

2. CSS Styling (With Smooth Animations) #

We’ll use flexbox to handle the responsive layout, and CSS transitions to make the sidebar slide smoothly. The key is toggling a collapsed class that adjusts the sidebar’s width and updates the toggle button’s appearance.

/* Reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-container {
  display: flex;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

/* Toggle Button */
.toggle-btn {
  background: #f0f0f0;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  border-right: 1px solid #ddd;
}

/* Sidebar */
.sidebar {
  width: 280px; /* Default sidebar width */
  background: #f8f9fa;
  border-right: 1px solid #ddd;
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 0; /* Collapsed state: hide sidebar entirely */
}

.sidebar-content {
  padding: 1.5rem;
}

.sidebar-content ul {
  list-style: none;
  margin-top: 1rem;
}

.sidebar-content ul li {
  margin-bottom: 0.8rem;
}

.sidebar-content ul li a {
  text-decoration: none;
  color: #333;
}

/* Main Content */
.main-content {
  flex: 1; /* Take up all remaining space in the container */
  padding: 2rem;
  overflow-y: auto; /* Enable scrolling if content exceeds viewport */
  transition: padding-left 0.3s ease;
}

/* Optional: Adjust main content padding when sidebar is collapsed */
.sidebar.collapsed ~ .main-content {
  padding-left: 1rem;
}

3. JavaScript Logic (Two Options) #

Option 1: Vanilla JavaScript #

This uses plain JS to toggle the collapsed class on the sidebar and update the toggle button’s text.

const toggleBtn = document.getElementById('sidebar-toggle');
const sidebar = document.getElementById('sidebar');

toggleBtn.addEventListener('click', () => {
  // Toggle the collapsed class on the sidebar
  sidebar.classList.toggle('collapsed');
  
  // Switch button text between << and >>
  toggleBtn.textContent = sidebar.classList.contains('collapsed') ? '>>' : '<<';
});

Option 2: jQuery #

If you prefer jQuery, this achieves the same result with fewer lines of code:

$(document).ready(function() {
  $('#sidebar-toggle').click(function() {
    $('#sidebar').toggleClass('collapsed');
    $(this).text($('#sidebar').hasClass('collapsed') ? '>>' : '<<');
  });
});

4. Bonus: Persist Collapse State #

If you want the sidebar to remember its collapsed/expanded state when the page refreshes, add this persistence logic using localStorage:

Vanilla JS Version #

// Load saved state on page load
window.addEventListener('load', () => {
  const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
  if (isCollapsed) {
    sidebar.classList.add('collapsed');
    toggleBtn.textContent = '>>';
  }
});

// Save state to localStorage when toggling
toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('collapsed');
  const isCollapsed = sidebar.classList.contains('collapsed');
  toggleBtn.textContent = isCollapsed ? '>>' : '<<';
  localStorage.setItem('sidebarCollapsed', isCollapsed);
});

jQuery Version #

$(document).ready(function() {
  // Load saved state on page load
  const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
  if (isCollapsed) {
    $('#sidebar').addClass('collapsed');
    $('#sidebar-toggle').text('>>');
  }

  $('#sidebar-toggle').click(function() {
    $('#sidebar').toggleClass('collapsed');
    const isCollapsed = $('#sidebar').hasClass('collapsed');
    $(this).text(isCollapsed ? '>>' : '<<');
    localStorage.setItem('sidebarCollapsed', isCollapsed);
  });
});

Optional: Bootstrap Alternative (If You Want to Try) #

Since you mentioned Bootstrap, you can use its built-in offcanvas component for a pre-styled, accessible solution. Here’s a quick example:

<!-- Include Bootstrap CSS first -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid p-0">
  <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas">
    <<
  </button>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebarOffcanvas">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Navigation</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      <ul class="nav flex-column">
        <li class="nav-item"><a class="nav-link" href="#">Section 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Section 2</a></li>
      </ul>
    </div>
  </div>

  <main class="p-4">
    <h1>Main Content</h1>
    <!-- Your content here -->
  </main>
</div>

<!-- Include Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap handles the sliding animation and accessibility features out of the box, but it requires including their CSS/JS files.

内容的提问来源于stack exchange，提问作者user172586