javascript - 如何创建下拉文本的垂直列表？

Question

我试图了解如何生成这种下拉列表，可能没有 Js.

为了更清楚，我正在尝试做这样的事情：

<Clickable Text Subject Name>
    <Hidden Description>
<Clickable Text Subject Name>
    <Hidden Description>
<Clickable Text Subject Name>
    <Hidden Description>

因此，当单击主题时，“隐藏描述”会移动其下方的元素。

此外，当我尝试添加多个下拉文本元素时，它们被水平放置

我的尝试：

.dropbtn {
  cursor: pointer;
  display: inline-block;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="dropdown">
  <p class="dropbtn">Subject name1</p>
  <div class="dropdown-content">
    <p>The subject description in all it's glory</p>
  </div>
</div>

如果您有任何想法，请告诉我，谢谢！

标签： javascripthtmlcss

Answer 1

<script>
        let isOpen = false;

    function something() {
      isOpen = !isOpen;
      let result = isOpen ? 'block':'none'
      document.getElementById("dropdown").style.display = result;
    }
    </script>

    <div class="dropdown">
        <button class="dropDownButton" onclick="something()">DROPDOWN</button>
        <div class="dropDownContent" id="dropdown">
          Lorem ipsum dolor sit amet.
        </div>
      </div>