Foundation JavaScript功能异常求助：全屏侧边栏无法正常工作

Hey there, let’s work through why your full-screen off-canvas menu isn’t behaving like the Foundation example you’re referencing. I’ve dealt with similar Foundation component quirks before, so here are the most likely fixes to try:

1. You’re Missing Critical Foundation Dependencies #

Foundation’s off-canvas component relies on its core CSS, JavaScript files, and jQuery to function. If these aren’t properly included and initialized, the component won’t work at all.

Make sure your HTML includes these resources in the right order:

<!-- Foundation CSS in <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">

<!-- jQuery + Foundation JS before closing </body> -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>

<!-- Initialize Foundation -->
<script>
  $(document).ready(function() {
    $(document).foundation();
  });
</script>

Pro tip: Match the Foundation version to the one used in the official example to avoid compatibility headaches.

2. Custom Full-Screen Styles Are Missing #

The offcanvas-full-screen classes you’re using are custom to that specific building block—they aren’t part of Foundation’s default off-canvas styles. Without the corresponding CSS, the panel will just use Foundation’s narrow default width instead of filling the screen. Add these styles to your project:

.offcanvas-full-screen {
  width: 100vw;
  height: 100vh;
  background: #1a1a1a;
  padding: 2rem;
}

.offcanvas-full-screen-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.offcanvas-full-screen-close {
  align-self: flex-end;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: white;
}

.offcanvas-full-screen-menu {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.offcanvas-full-screen-menu li {
  margin-bottom: 1.5rem;
}

.offcanvas-full-screen-menu a {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
}

3. Double-Check Data Attribute Setup #

Your existing HTML looks mostly correct, but verify these small details:

• The data-toggle value on your button (offcanvas-full-screen) exactly matches the id of your off-canvas panel.
• The data-off-canvas-content wrapper properly encloses your main page content (your top bar setup here is correct).
• If the data-transition="overlap" is causing issues, try removing it temporarily to test the base functionality before re-adding it.

Full Working Example #

Here’s your code combined with all necessary dependencies and styles—test this in CodePen or Brackets first to confirm it works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full-Screen Off-Canvas Menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
  <style>
    .offcanvas-full-screen {
      width: 100vw;
      height: 100vh;
      background: #1a1a1a;
      padding: 2rem;
    }

    .offcanvas-full-screen-inner {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .offcanvas-full-screen-close {
      align-self: flex-end;
      background: transparent;
      border: none;
      font-size: 2rem;
      color: white;
    }

    .offcanvas-full-screen-menu {
      list-style: none;
      padding: 0;
      margin-top: 2rem;
    }

    .offcanvas-full-screen-menu li {
      margin-bottom: 1.5rem;
    }

    .offcanvas-full-screen-menu a {
      color: white;
      font-size: 1.5rem;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div id="offcanvas-full-screen" class="offcanvas-full-screen" data-off-canvas data-transition="overlap">
    <div class="offcanvas-full-screen-inner">
      <button class="offcanvas-full-screen-close" aria-label="Close menu" type="button" data-close>
        <span aria-hidden="true">&times;</span>
      </button>
      <ul class="offcanvas-full-screen-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </div>
  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <div class="top-bar">
      <div class="top-bar-title">
        <strong>Site Title</strong>
      </div>
      <div class="top-bar-right">
        <button class="menu-icon dark" type="button" data-toggle="offcanvas-full-screen"></button>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
  <script>
    $(document).ready(function() {
      $(document).foundation();
    });
  </script>
</body>
</html>

If this works, you can gradually reintroduce your other site code to spot any conflicts that might be breaking the component.

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