主页 / 问题 / 1367583
Accepted
user9988899
Asked:2022-06-01 01:44:52 +0000 UTC2022-06-01 01:44:52 +0000 UTC

HTML 和 CSS/SASS/SCSS 中的手风琴

  • 772

我想在 HTML（通过复选框）和 CSS/SASS/SCSS 中制作一个简单的手风琴，但在某处我犯了一个错误，我认为在 CSS 中，因此，当您单击“标题”时（参见代码） ，该段落不可见。我在哪里做错了？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>#</title>
</head>
<body>
    <div>
        <input class="input" type="checkbox">
        <label class="label" for="input">Заголовок</label>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum hic 
            veniam illum delectus! Quisquam consequuntur aspernatur facilis quod fugiat, 
            quia odio alias illum temporibus suscipit! Neque possimus nemo ex!
        </p>
    </div>
</body>
</html>

CSS：

div {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.input {
     position: absolute;
     opacity: 0;
     z-index: -1;
}
.label {
    text-align: left;
    font-family: sans-serif;
    background-color: red;
    display: block;
    padding: 5px;
    margin-bottom: 0px;
}
.label:hover {
    cursor: pointer;
}
p {
    text-align: justify;
    font-family: sans-serif;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    margin-top: 0px;
    display: none;
}
.input:checked ~ p {
    display: block;
}
html

1 个回答

  1. Best Answer

    必须为input-->添加id="input"

    例子

    div {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  position: relative;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.label {
  text-align: left;
  font-family: sans-serif;
  background-color: red;
  display: block;
  padding: 5px;
  margin-bottom: 0px;
}

.label:hover {
  cursor: pointer;
}

p {
  text-align: justify;
  font-family: sans-serif;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  margin-top: 0px;
  display: none;
}

.input:checked~p {
  display: block;
}
    <div>    
  <input class="input" id="input" type="checkbox">
  <label class="label" for="input">Заголовок</label>  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum hic veniam illum delectus! Quisquam consequuntur aspernatur facilis quod fugiat, quia odio alias illum temporibus suscipit! Neque possimus nemo ex!
  </p>
</div>

    • 0

相关问题