Question

正如标题所说我试图在html中显示和隐藏div。我找到了这个链接 Show hide divs on click in HTML and CSS without jQuery并使用了http://jsbin.com/Amejum/2/edit?html,css,output

然而，而不是Content 1 ....我得到了更多：textfield，下拉列表和一个按钮。每当我点击我的文本字段，下拉列表或按钮时，它都会再次隐藏。

我是一个完全的菜鸟，所以我相信这会很容易吗？

亲切的问候，

桑德。

Answer 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>

Answer 2

我不太确定你为什么要点击div本身，但是你可以绕过作为点击处理程序的子元素。

$('#main').click(function(e) {
  if ( e.target.id === "main" ) {
    if ( $(this).hasClass('expanded') ) {
      $(this).removeClass('expanded');
    } else {
      $(this).addClass('expanded');
    }
   }
});

http://codepen.io/anon/pen/XXXorr

Answer 3

试试这段代码，它可能有所帮助。通过这种非常简单的方式帮助您显示/隐藏任何对象。

HTML代码：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit mi, rutrum eget egestas eu, dapibus sit amet ex. Fusce aliquet vestibulum erat, at viverra tellus pellentesque ac.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

脚本：

$("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });

单击html显示和隐藏div

3 个答案: