如何创建可折叠菜单？

Question

如何在“欺骗状态”上创建可折叠菜单，在"RainbowSixSiege作弊“中创建另一个菜单。我擅长用html和css构建网站，但我拒绝使用javascript -没有完整的代码，我复制了主要部分，我希望你需要的东西-如果你需要什么

button {
  display: inline-block;
  border: none;
  background: none;
  cursor: pointer;
}
.product-status-box {
  background-color: #fff;
  box-shadow: 12px 12px 30px 0px rgba(0, 0, 0, 0.15);
  padding: 3.2rem 6.4rem;
  border-radius: 22px;
  margin-top: 3.2rem;
}

.product-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.product-status-title {
  font-size: 1.8rem;
  font-weight: 700;
}
.product-status-icon {
  width: 2.4rem;
}

.margin-top {
  margin-top: 1.6rem;
}

.hidden-box {
}

.hidden-box-btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.hidden-box-btn h3 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.product-icon {
  width: 2rem;
}

.hidden-2nd-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
}

 <div class="product-status-box">
          <button type="button" class="product-status">
            <h2 class="product-status-title">Cheats Status</h2>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="product-status-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </button>
          <div class="hidden-box">
            <button type="button" class="hidden-box-btn margin-top">
              <h3>RainbowSixSiege Cheats</h3>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="product-icon"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </button>
            <div class="hidden-2nd-box">
              <p>Klar.gg</p>
              <p class="green-text">Operational</p>
            </div>
          </div>
       </div>

​

Answer 1

这将是一个棘手的问题，我建议您添加jQuery用户界面，并将这些标记放在HTML元素中。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
 <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

现在将此jQuery代码添加到您的JavaScript中，并将其链接到html，就像您在index.html中链接外部CSS一样。

像这样

<script src=" *your file path of JavaScript* "></script>

现在，在您的JavaScript文件中添加这一行

    $(document).ready(function () {
    $('').click(function () {  //add your class or id in the click function
        $('').slideToggle(); //here you add class or id which you want to show when user click on button
    });
});

以上括号中的引号是强制性的，请不要删除它们，将类或id放在其中

用不同类或id的第二个按钮重复这个按钮。

希望这能解决你的问题。