如何使 PopUP 可折叠？答案

【问题标题】：How to make PopUP Collapsible?如何使 PopUP 可折叠？
【发布时间】：2020-10-23 20:44:53
【问题描述】：

我正在做一个学校项目，我们必须为酒吧创建一个静态数字菜单。无论如何，我制作了一个按钮，当用户单击它时，会显示一个包含所有项目列表的 PopUP（我使用了 display: none; 属性）：

PopUP 的源代码是这样的（我把它保存在 index.html 文件中）：

<div class="menu">
<h2>Our Menu</h2>
<ul>
     <li>
         <label>
             <input type="checkbox" name="">
             <span class="icon"></span>
             <span class="list">Fried Fish With Souce</span>
         </label>
     </li>
     <li>
         <label>
             <input type="checkbox" name="">
             <span class="icon"></span>
             <span class="list">Fresh Traditional Cod And Chips</span>
         </label>
     </li>
</ul>
</div>

这是 CSS 源代码：

.menu
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  background-color: #fff;
  width: 380px;
  margin: 25px;
}

h2
{
    margin: 0;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

ul
{
    margin: 0;
    padding: 10px 20px;
    border: 1px dashed rgba(0,0,0,0.5);
    border-top: none;
}

ul li
{
    list-style: none;
    padding: 5px 0; 
    font-size: 16px;
}

ul li input[type="checkbox"]
{
    display: none;
}

ul li span.list
{
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0 5px;
    transition: 0.25s;
    transition-delay: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.list
{
    color: #ccc;
    transition-delay: 0s;
}

ul li span.list:before
{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    background: #ff3663;
    width: 100%;
    height: 100%;
    transition: 0.25s;
    transition-delay: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.list:before
{
    left: 100%;
    transition-delay: 0s;
}

ul li span.list:after
{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    background: #000;
    width: 100%;
    height: 2px;
    transform-origin: left;
    transform: scaleX(0);
    transition: 0.25s;
    transition-delay: 0s;
}

ul li input[type="checkbox"]:checked ~ span.list:after
{
    transform: scaleX(1);
    transition-delay: 0.25s;
}

ul li span.icon
{
    position: relative;
    top: -3px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1px solid #262626;
    display: inline-block;
    margin-right: 2px;
    overflow: hidden;
}

ul li span.icon:before
{
    content: 'x';
    position: absolute;
    top: -5px;
    left: 4px;
    transform: translateY(-100%);
    transition: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.icon:before
{
    transform: translateY(0);
}

这样可以，但是所有的菜单项也都有描述，所以菜单的源代码应该是这样的：

<li>
    <label>
           <input type="checkbox" name="">
           <span class="icon"></span>
           <span class="list">Fried Fish With Souce</span>
           <span class="itemDescription">THIS IS A DESCRIPTION!!!</span>
    </label>
</li>

所以，问题就变成了：如何仅在选中某个项目时将描述添加到每个项目，并在取消选中该特定项目时隐藏描述？应该有某种可折叠菜单，例如动画/过渡。另外，我怎样才能使整个 PopUP 在水平轴上响应（所有元素都应该变小）但是当出现新的描述时，所有其他项目都应该向下移动，因此，PopUP 应该变得更长。我不知道如何解决这个问题，因此，在正确方向上的任何帮助都会非常有用。提前致谢！

【问题讨论】：

标签： html css popup transition responsive

【解决方案1】：

谈到响应性，您应该阅读this from w3schools，它解释了如何在 css 中创建网格系统。你也可以学习使用像Bootstrap这样的框架

您尝试做的所有其他事情都可以通过几行 javascript 代码来完成！这是菜单中一项的示例：

<!--Put this before your </body> tag-->
<script>
// Add a click event listener to the element the id refers to
document.getElementById("menu-item-id").addEventListener("click", function() {
   // Get descriprion reference
   let description = document.getElementById("menu-item-description");
   // If description is visible hide it
   if (description.style.display !== "none") {
      description.style.display = "none";
   }
   // If description is not visible show it
   else {
      description.style.display = "block";
   }
});
</script>

您可以了解有关 addEventListener here 和 getElementById here 的更多信息

【讨论】：