标签 javascript jquery html css
<分区>
正如标题所说，我正在尝试在 html 中显示和隐藏 div。我找到了这个链接 Show hide divs on click in HTML and CSS without jQuery并使用了这个 http://jsbin.com/Amejum/2/edit?html,css,output
但是，我得到的不是内容 1...，而是更多内容:文本字段、下拉列表和一个按钮。每当我现在单击我的文本字段、下拉列表或按钮时，它都会再次隐藏。
我完全是个菜鸟，所以我确定这会很简单？
亲切的问候，
桑德。
最佳答案
只要你把你的内容放在<div></div>里面它应该按预期运行。请看下面的片段:
.collapse {
font-size: 31px;
display: block;
}
.collapse + input {
display: none;
}
.collapse + input + * {
display: none;
}
.collapse+ input:checked + * {
display: block;
}<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox">
<div>
<!------------------------------------------After this-->
<input placeholder="Text" />
<select>
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
<button>Button</button>
</div>
<!-----------------------------------------Before this-->
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>
<!------------------------------------------After this-->
<p>Ut sit ponderum voluptatum, case ignota constituto pri ex, quas vidit ullamcorper cu vim. At mel minimum epicurei, ius no augue graece utroque. Dicam ullamcorper mei ex, ad tota numquam fierent pri. Vim an quod incorrupte, eu duo legimus constituam.
Modus posidonium qui cu, cu lorem audire mea. Nam prima malis accommodare ne, vero euismod vel et.
</p>
<p>
Ea qui maiorum dolores hendrerit, ne tamquam luptatum pro. Liber maiorum detraxit ius ut, aeterno molestie expetendis duo in. Dicant mediocrem suscipiantur ei eos, inermis sapientem at duo. Mutat tempor equidem pro te. Everti prompta accusam vim id, sit
in eius labitur feugiat.
</p>
<p>
Mollis quaestio est ut, ex mutat elaboraret vel. Vis solum placerat te. Tantas laudem vel ne, in cum purto quando vocibus. Ne labores ancillae consequuntur sea. Epicurei constituto adipiscing nec at, has ut solum dicta maiorum.
</p>
<p>
Sea soleat discere ad. Te pri mucius detraxit invenire, pro ipsum liber mandamus ne. Ut tantas definiebas constituam has, ea vis sumo eleifend consequuntur. Et mea viris pertinacia. Ferri illum facete sed ea, quem lucilius qui ei. Pri quaeque fuisset
cu, facer mollis animal eum an.
</p>
<p>
Omnesque noluisse gloriatur vim an, malorum impedit democritum et quo, vim nobis tantas nusquam cu. Per probo persecuti eu, ex habemus disputando duo. Te eos possim facilis. Labitur veritus pro ad. Eius habeo senserit est eu.
</p>
<p>
His debet viderer persecuti ne, cum movet persius feugiat ei. Harum possit prompta te qui, at utinam fuisset elaboraret sea. Per iisque corpora mediocritatem ut, dolor putent temporibus vix ei, vitae cetero no ius. Error graecis ut vix, sit ut mucius
torquatos consetetur. Ne nec integre pertinax. Legendos quaestio eum cu.
</p>
<p>
Scripta delicata sit et, te reque elitr nam. Per aperiam ancillae splendide ei, quo mundi accusamus cu. Te diceret gubergren sea, eu per lobortis efficiendi. Mea primis temporibus et, in habemus perpetua est. Has minim aeque no, iusto choro ut mel, qui
ei populo epicuri dissentiunt.
</p>
<p>
Ullum conceptam usu ne, iisque fierent deterruisset id per, ad sea utinam convenire sententiae. Has cu quis sint, ne saepe debitis iudicabit pri, cum ut utamur appareat consetetur. Homero eloquentiam ut ius. Agam persius per no, usu reque delenit sententiae
cu, mutat vitae at cum. In aeterno legimus pertinax per, in periculis adolescens mel. Sea et fierent adolescens.
</p>
<p>
Sed ei iisque commune, te quo rebum indoctum salutandi. Hinc decore adolescens qui cu, pro maiorum posidonium referrentur an, commodo nominati concludaturque eam ut. Civibus pericula euripidis usu cu, solet latine dissentiet cum eu, ne brute sapientem
voluptaria mel. No commodo copiosae vel, audire commodo has ea. Quas minimum sea at, erant vocent eam an. Est habeo volumus an, ne verterem partiendo intellegebat ius.
</p>
<p>
Errem volutpat ei qui, no pri duis scripta delicata. Usu integre erroribus contentiones te, cu putant deterruisset sea, cum an iusto dissentiet. At natum probo vix, ad eos laudem disputando, id commodo prompta cum. Et habemus recusabo dignissim pri, ea
pri natum iuvaret. Epicuri apeirian scriptorem ei has, inermis petentium splendide et sit, sea everti menandri quaerendum at.
</p>
</div>
<!-----------------------------------------Before this-->
</body>
</html>关于javascript - 在html中点击显示和隐藏div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34317245/