我只需要用这个 UI 打开一个菜单

Question

我设计了这个 UI，我只想在这个 UI 设计上实现相同的功能。我只需要一次打开一个菜单，而不是所有菜单。

当您单击按钮时，它会打开或关闭当前手风琴。此外，如果有任何其他打开，它会在您尝试打开另一个时自动关闭。

请使用相同的转场。

var accordians = document.getElementsByClassName("accordion_btn");
for (var i = 0; i < accordians.length; i += 1) {
  accordians[i].onclick = function() {
    this.classList.toggle('arrowClass');
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // Accordion is open, needs to be closed
      content.style.maxHeight = null;
    } else {
      // Accordion is closed, needs to be open
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

body {
  display: grid;
  place-items: center;
}

.accordion_container {
  background-color: #efefef;
  padding: 10px;
  width: 500px;
  /*height: 400px;*/
  overflow: auto;
  border-radius: 3px;
  /* padding: 10px; */
  position: relative;
}

.accordion_container .accordion_body {
  /*padding: 20px 0 30px;*/
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn {
  width: 100%;
  background-color: gainsboro;
  border: none;
  outline: none;
  text-align: left;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 300ms linear;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn:not(:last-child) {
  margin-bottom: 3px;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn:hover {
  background-color: silver;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgba(19, 2, 153, 1);
  color: rgba(19, 2, 153, 1);
  border-right-width: 3px;
  border-right-color: rgba(19, 2, 153, 1);
  border-right-style: solid;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn::before {
  content: '▼';
  float: right;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn.arrowClass::before {
  content: '▲';
}

.accordion_container .accordion_body .accordion_body_item .accordion_content {
  /* padding: 0 20px; */
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: gainsboro;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: gainsboro;
  /* border-bottom-width: 1px; */
  /* border-bottom-style: solid; */
  /* border-bottom-color: gainsboro; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 450ms ease-in-out;
}

.accordion_container .accordion_body .accordion_body_item .accordion_content .inner {
  padding: 20px 15px;
  font-size: 14px;
  background-color: #777;
  color: #dfdfdf;
  /*height: 200px;*/
  overflow: auto;
}

.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_datetime {
  text-align: right;
}

.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_body {
  margin-top: 20px;
  text-align: justify;
}

<div class="accordion_container">
  <div class="accordion_body">
    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sint, deserunt cumque nobis illo ut beatae impedit pariatur aliquid minus!
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这应该可以满足您的要求，但您可能会减少 html 和 css 的数量，使用更新的 JS ES6 语法会让您的生活更轻松。

我在修改的地方添加了一些评论

  // Use QuerySelector to get all toggle buttons
  const accordians = document.querySelectorAll(".accordion_btn");

  // Loop elements and add onclick handler
  accordians.forEach((element) => {
    element.onclick = (event) => {
      // get trigger elementa and body
      const toggleButton = event.target;
      const accordianBody = toggleButton.nextElementSibling;

      // Get a list of open accordians
      const openAccordians = document.querySelectorAll(
        ".accordion_content.open"
      );
      // Get a list of open accordians
      const toggleButtons = document.querySelectorAll(
        ".accordion_btn.arrowClass"
      );

      // Check if clicked accordian is already open
      if (accordianBody.classList.contains("open")) {
        accordianBody.classList.remove("open");
        toggleButton.classList.remove("arrowClass");
        return;
      }

      // Close
      openAccordians.forEach((item) => item.classList.remove("open"));
      toggleButtons.forEach((item) => item.classList.remove("arrowClass"));

      // Open clicked one.
      accordianBody.classList.add("open");
      toggleButton.classList.add("arrowClass");
    };
  });

  body {
    display: grid;
    place-items: center;
  }

  .accordion_container {
    background-color: #efefef;
    padding: 10px;
    width: 500px;
    /*height: 400px;*/
    overflow: auto;
    border-radius: 3px;
    /* padding: 10px; */
    position: relative;
  }

  .accordion_container .accordion_body {
    /*padding: 20px 0 30px;*/
  }

  .accordion_container .accordion_body .accordion_body_item .accordion_btn {
    width: 100%;
    background-color: gainsboro;
    border: none;
    outline: none;
    text-align: left;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 300ms linear;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn:not(:last-child) {
    margin-bottom: 3px;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn:hover {
    background-color: silver;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: rgba(19, 2, 153, 1);
    color: rgba(19, 2, 153, 1);
    border-right-width: 3px;
    border-right-color: rgba(19, 2, 153, 1);
    border-right-style: solid;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn::before {
    content: "▼";
    float: right;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn.arrowClass::before {
    content: "▲";
  }

  .accordion_container .accordion_body .accordion_body_item .accordion_content {
    /* padding: 0 20px; */
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: gainsboro;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: gainsboro;
    /* border-bottom-width: 1px; */
    /* border-bottom-style: solid; */
    /* border-bottom-color: gainsboro; */
    overflow: hidden;
    transition: max-height 450ms ease-in-out;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_content
    .inner {
    padding: 20px 15px;
    font-size: 14px;
    background-color: #777;
    color: #dfdfdf;
    /*height: 200px;*/
    overflow: auto;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_content
    .inner
    .inner_datetime {
    text-align: right;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_content
    .inner
    .inner_body {
    margin-top: 20px;
    text-align: justify;
  }

  /* Add open body state with css */
  .accordion_content.open {
    max-height: 500px;
  }

  /* Accordian Closed state */
  .accordion_content {
    max-height: 0;
    transition: 0.3s;
  }

<div class="accordion_container">
  <div class="accordion_body">
    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others. Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Qui sint, deserunt cumque nobis illo ut beatae
            impedit pariatur aliquid minus!
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

更新：更正 css 中的注释格式。

我只需要用这个 UI 打开一个菜单

I need just one menu open with this UI

html

javascript

css

user-interface