在div中浮动列表

Question

我想做一个可折叠的按钮，在点击时打开一个项目列表，我试图浮动按钮内的元素，但它似乎不起作用。

.collapsible-group {
  overflow: hidden;
}

.collapsible-content {
  float: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: block;
}

.collapsible {
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 33%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  background-color: Transparent;
  display: block;
  margin: auto;
}

<div class="collapsible-group">
  <button class="collapsible">Modern Trade</button>
  <div class="collapsible-content">
    <ul>
      <li>num 1</li>
      <li>num2</li>
      <li>num3</li>
      <li>num4</li>
    </ul>
  </div>
</div>

Answer 1

请尝试以下方法

<div class="collapsible-content">
  <ul class=my-float"> <li>num 1</li>
  <li>num2</li>
  <li>num3</li>
  <li>num4</li></ul>

//在你的css文件中添加这个

.my-float li{
  float:left;
}

Answer 2

你需要Javascript来检测按钮点击，然后用它做一些事情。此代码将一个类添加到包含菜单的div并更改最大高度。

const myButton = document.getElementsByTagName("button")[0];
myButton.onclick = () => {
  const menu = document.getElementsByClassName("collapsible-content")[0];
  menu.classList.toggle("showMenu");
}

.collapsible-group {
  overflow: hidden;
}

.collapsible-content {
  float: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: block;
}

.collapsible-content.showMenu {
  max-height: 1000px;
}

.collapsible {
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 33%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  background-color: Transparent;
  display: block;
  margin: auto;
}

<div class="collapsible-group">
  <button class="collapsible">Modern Trade</button>
  <div class="collapsible-content">
    <ul>
      <li>num 1</li>
      <li>num 2</li>
      <li>num 3</li>
      <li>num 4</li>
    </ul>
  </div>
</div>