1

我为响应式侧边栏编写了代码。菜单关闭按钮有效,但打开按钮无效。

在分配任务时,我必须在 Stimulus 的帮助下写下这一切

HTML 写在 application.html 文件中

<!DOCTYPE html>
<html>
<head>
  <title>CosmoPort</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>
<div class="h-screen flex overflow-hidden bg-gray-100">
  <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
  <div data-controller="sidebar" class="md:hidden">
    <div class="fixed inset-0 flex z-40"
         data-sidebar-target="element"
         data-transition-enter="transition-opacity ease-linear duration-300"
         data-transition-start="opacity-0"
         data-transition-enter-end="opacity-100"
         data-transition-leave="transition-opacity ease-linear duration-300"
         data-transition-leave-start="opacity-100"
         data-transition-leave-end="opacity-0">
      <div class="fixed inset-0">
        <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
      </div>
      <div
        data-sidebar-target="element"
        data-transition-enter="transition ease-in-out duration-300 transform"
        data-transition-enter-start="-translate-x-full"
        data-transition-enter-end="translate-x-0"
        data-transition-leave="transition ease-in-out duration-300 transform"
        data-transition-leave-start="translate-x-0"
        data-transition-leave-end="-translate-x-full"
        class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
        <div class="absolute top-0 right-0 -mr-12 pt-2">
          <button
            data-action="click->sidebar#toggle"
            class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
            <span class="sr-only">Close sidebar</span>
            <!-- Heroicon name: x -->
            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>
        <div class="flex-shrink-0 flex items-center px-4">
          <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
        </div>
        <div data-controller="sidebar" class="mt-5 flex-1 h-0 overflow-y-auto">
          <nav class="px-2 space-y-1">
            <%= render "layouts/application_sidebar" %>
          </nav>
        </div>
      </div>
      <div class="flex-shrink-0 w-14" aria-hidden="true">
        <!-- Dummy element to force sidebar to shrink to fit close icon -->
      </div>
    </div>
  </div>

  <!-- Static sidebar for desktop -->
  <div class="hidden md:flex md:flex-shrink-0">
    <div class="flex flex-col w-64">
      <!-- Sidebar component, swap this element with another sidebar if you like -->
      <div class="flex flex-col h-0 flex-1">
        <div class="flex items-center h-16 flex-shrink-0 px-4 bg-gray-900">
          <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
        </div>
        <div class="flex-1 flex flex-col overflow-y-auto">
          <nav class="flex-1 px-2 py-4 bg-gray-800 space-y-1">
            <%= render "layouts/application_sidebar" %>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col w-0 flex-1 overflow-hidden">
    <div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
      <button
        type="button" data-sidebar-target="element"
        data-action="click->sidebar#toggle"
        class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
        <span class="sr-only">Open sidebar</span>
        <!-- Heroicon name: menu-alt-2 -->
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
        </svg>
      </button>
      <div class="flex-1 px-4 flex justify-end">

        <div class="ml-4 flex items-center md:ml-6">
          <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span class="sr-only">View notifications</span>
            <!-- Heroicon name: bell -->
            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
            </svg>
          </button>

          <!-- Profile dropdown -->
          <div data-controller="dropdown" class="ml-3 relative">
            <div>
              <button
                type="button" data-target="dropdown.button" data-action="click->dropdown#toggleMenu"
                class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150" id="user-menu" aria-haspopup="true" aria-expanded="true">
                <span class="sr-only">Open user menu</span>
                <% if current_user.photo.attached? %>
                  <%= image_tag current_user.photo.variant(auto_orient: true, gravity: "center", resize: "200x200^").processed, class: 'rounded-full h-8 w-8' %>
                <% else %>
                  <svg class="h-8 w-8 text-gray-600 rounded-full" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"></path>
                  </svg>
                <% end %>
              </button>
            </div>
            <!--
              Profile dropdown panel, show/hide based on dropdown state.

              Entering: "transition ease-out duration-100"
                From: "transform opacity-0 scale-95"
                To: "transform opacity-100 scale-100"
              Leaving: "transition ease-in duration-75"
                From: "transform opacity-100 scale-100"
                To: "transform opacity-0 scale-95"
            -->
            <div class="menu hidden"
                 data-dropdown-target="menu"
                 data-transition-enter="transition ease-out duration-100"
                 data-transition-enter-start="transform opacity-0 scale-95"
                 data-transition-enter-end="transform opacity-100 scale-100"
                 data-transition-leave="transition ease-in duration-75"
                 data-transition-leave-start="transform opacity-100 scale-100"
                 data-transition-leave-end="transform opacity-0 scale-95"
            >
              <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5">
                <div role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                  <%= render partial: 'layouts/account_items' %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <main
      class="flex-1 relative overflow-y-auto focus:outline-none" tabindex="0">
      <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
          <%= yield :page_header %>
        </div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
          <%= render partial: 'layouts/flash' %>
          <%= yield %>
        </div>
      </div>
    </main>
  </div>
</div>

<footer class="footer">
  <div class="container mx-auto mt-5">
    &copy; <span id="current_year"></span> CosmoZoo Inc, All rights reserved.
  </div>
</footer>
</body>
</html>

用 sidebar_controller.js 编写的 js 代码

Import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["element"];

  toggle(event) {
    event.preventDefault();
    this.elementTargets.forEach((element) => {
      if (element.classList.contains("hidden")) {
        element.classList.remove("hidden");
        element.classList.add("block");
      } else {
        element.classList.add("hidden");
        element.classList.remove("block");
      }
    });
  }
}

这是屏幕截图。关闭按钮有效,但菜单打开按钮无效。我哪里做错了?问题出在 sidebar_controller.js 或 application.html 中的代码中吗?

在此处输入图像描述

在此处输入图像描述

请帮帮我。

4

0 回答 0