如何使用CSS切换显示/隐藏div?

切德·何塞

我创建了一个菜单div,单击鼠标即可在其下方显示/隐藏另一个div。但是,我需要菜单div上的箭头才能单击。您知道箭头将如何指向侧面,但是单击菜单div并显示其他div时会向下切换。我下面有CSS代码和HTML。

PS:我只需要使用CSS。

CSS:

.drop {
  cursor: pointer;
  display: block;
  background: #090;
}

.drop + input{
 display: none; /* hide the checkboxes */
}

.drop + input + div{
  display:none;
}

.drop + input:checked + div{
  display:block;
}

排队:

<label class="drop" for="_1">Collapse 1 </label>

<input id="_1" type="checkbox"> 
<div>Content 1</div>

感谢您的帮助!

G-西里尔

您将不得不更改结构并使用伪指令插入箭头:

例子

.drop {
  cursor: pointer;
  display: block;
  background: #090;
}

input[type="checkbox"]  {
 display: none; /* hide the checkboxes */
}

input +.drop +  div

{
  display:none;
}
.drop:after {
  content:'▼';
  }
:checked  + .drop:after {
  content:'▲';
  }
input:checked + .drop + div{
  display:block;
}
<input id="_1" type="checkbox"> 
<label class="drop" for="_1">Collapse 1 </label>

<div>Content 1</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用CSS切换显示/隐藏div?

来自分类Dev

如何切换布尔状态以显示/隐藏组件/ div?

来自分类Dev

使用切换jQuery显示/隐藏

来自分类Dev

使用切换jQuery显示/隐藏

来自分类Dev

使用 jQuery 显示/隐藏切换

来自分类Dev

如何仅使用 css 切换 2 div 的顺序?

来自分类Dev

根据使用javascript的选择显示/隐藏(切换)div的显示

来自分类Dev

js在Div中查找类+切换CSS /隐藏一个显示其他

来自分类Dev

创建切换按钮行为以隐藏或显示div

来自分类Dev

切换显示/隐藏并同时替换div内容

来自分类Dev

jQuery按钮切换显示隐藏div

来自分类Dev

Javascript复选框切换div隐藏显示

来自分类Dev

jQuery切换按钮图像和Div显示/隐藏

来自分类Dev

jQuery切换隐藏后不显示div

来自分类Dev

javascript切换显示和隐藏几个div元素

来自分类Dev

切换div以在点击时显示,而切换另一个以隐藏

来自分类Dev

如何在没有“隐藏的div”或“不显示”的情况下切换内容?

来自分类Dev

jQuery切换显示/隐藏div ...如何防止页面跳到顶部?

来自分类Dev

如何将 div 元素的切换设置为首先隐藏并仅在单击后显示?

来自分类Dev

使用JS和Dropwdown通过ID选择器切换显示/隐藏DIV

来自分类Dev

css 中的隐藏元素在通过 Javascript 函数使用 onclick 事件切换时显示

来自分类Dev

错误:如何在隐藏和显示之间切换

来自分类Dev

如何在隐藏和显示之间切换?

来自分类Dev

如何切换显示/隐藏单个标签

来自分类Dev

使用jQuery隐藏/显示切换不切换?

来自分类Dev

使用jQuery切换隐藏/显示<tr>

来自分类Dev

如何使用jQuery在HTML中切换隐藏/显示最接近的UL?

来自分类Dev

Bootstrap表如何隐藏,使用JavaScript切换可见时无法正确显示

来自分类常见问题

使用jQuery切换时隐藏其他div

Related 相关文章

  1. 1

    如何使用CSS切换显示/隐藏div?

  2. 2

    如何切换布尔状态以显示/隐藏组件/ div?

  3. 3

    使用切换jQuery显示/隐藏

  4. 4

    使用切换jQuery显示/隐藏

  5. 5

    使用 jQuery 显示/隐藏切换

  6. 6

    如何仅使用 css 切换 2 div 的顺序?

  7. 7

    根据使用javascript的选择显示/隐藏(切换)div的显示

  8. 8

    js在Div中查找类+切换CSS /隐藏一个显示其他

  9. 9

    创建切换按钮行为以隐藏或显示div

  10. 10

    切换显示/隐藏并同时替换div内容

  11. 11

    jQuery按钮切换显示隐藏div

  12. 12

    Javascript复选框切换div隐藏显示

  13. 13

    jQuery切换按钮图像和Div显示/隐藏

  14. 14

    jQuery切换隐藏后不显示div

  15. 15

    javascript切换显示和隐藏几个div元素

  16. 16

    切换div以在点击时显示,而切换另一个以隐藏

  17. 17

    如何在没有“隐藏的div”或“不显示”的情况下切换内容?

  18. 18

    jQuery切换显示/隐藏div ...如何防止页面跳到顶部?

  19. 19

    如何将 div 元素的切换设置为首先隐藏并仅在单击后显示?

  20. 20

    使用JS和Dropwdown通过ID选择器切换显示/隐藏DIV

  21. 21

    css 中的隐藏元素在通过 Javascript 函数使用 onclick 事件切换时显示

  22. 22

    错误:如何在隐藏和显示之间切换

  23. 23

    如何在隐藏和显示之间切换?

  24. 24

    如何切换显示/隐藏单个标签

  25. 25

    使用jQuery隐藏/显示切换不切换?

  26. 26

    使用jQuery切换隐藏/显示<tr>

  27. 27

    如何使用jQuery在HTML中切换隐藏/显示最接近的UL?

  28. 28

    Bootstrap表如何隐藏,使用JavaScript切换可见时无法正确显示

  29. 29

    使用jQuery切换时隐藏其他div

热门标签

归档