Javascript菜单手风琴不要字

Question

我是编程初学者，我正在尝试为我的投资组合网站创建常见问题解答。

我正在使用 tailwind css 框架，但我没有使用 javascript 获得手风琴，你能帮我吗？

我有 class accordion__item 当点击元素时，我希望它显示包含在 accordion__content 段落元素中的内容，当再次点击时，它关闭内容。你能帮帮我吗？

let item = document.getElementsByClassName("accordion__item");
let i;

for (i = 0; i < item.length; i++) {
  item[i].addEventListener("click", function() {
    this.classList.toggle("open");
  });
}

.open {
  display: block
}

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="./modal.js"></script>
</head>

<body>
  <section class="bg-white dark:bg-gray-900">
    <div class="container max-w-4xl px-6 py-10 mx-auto">
      <h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1>

      <div class="mt-12 space-y-8">
        <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700 accordion__item open">
          <button class="flex items-center justify-between w-full p-8">
                            <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
    
                            <span class="text-gray-400 bg-gray-200 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
                                </svg>
                            </span>
                        </button>

          <hr class="border-gray-200 dark:border-gray-700">

          <p class="p-8 text-sm text-gray-500 dark:text-gray-300 accordion__content">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
          </p>
        </div>




      </div>
    </div>
  </section>
</body>

Answer 1

这里的问题是您正在切换 display: block。最初元素根据其性质是 block 或 inline。接下来是您在包含切换按钮的容器上切换它。

要修复它，我们需要切换实际上隐藏元素的 display: none，并将 class 切换目标从容器移动到它的内容。

let item = document.getElementsByClassName("accordion__item");
let i;

for (i = 0; i < item.length; i++) {
  item[i].addEventListener("click", function() {
    this.querySelector('.accordion__content').classList.toggle("d-none");
  });
}

.open {
  display: block
}

.d-none {
  display: none
}

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="./modal.js"></script>
</head>

<body>
  <section class="bg-white dark:bg-gray-900">
    <div class="container max-w-4xl px-6 py-10 mx-auto">
      <h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1>

      <div class="mt-12 space-y-8">
        <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700 accordion__item open">
          <button class="flex items-center justify-between w-full p-8">
                            <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
    
                            <span class="text-gray-400 bg-gray-200 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
                                </svg>
                            </span>
                        </button>

          <hr class="border-gray-200 dark:border-gray-700">

          <p class="p-8 text-sm text-gray-500 dark:text-gray-300 accordion__content">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
          </p>
        </div>




      </div>
    </div>
  </section>
</body>

Answer 2

所以在这种情况下，“accordion__content”应该总是 display: none。然后你可以检查打开 class 并将 accordion__content 变成 display: block.

.accordion__content {
  display: none;
}

.open .accordion__content {
  display: block;
}

Javascript菜单手风琴不要字

Javascript Menu Accordion Don't word

html

javascript

css

tailwind-css