Question

当用户点击其他地方时，是否可以显示/隐藏div？例如，我有两个div：

<div>Title</div>
<div>description</div>

描述是初始隐藏的，但是当用户点击Title div时，应该出现description div。

是否可能没有java脚本？

编辑：鼠标点击show show description div。要隐藏此div，用户应再次单击标题div。

Answer 1

演示 - http://jsfiddle.net/victor_007/2gyg5m85/1/

您可以使用input（复选框）查找:checked或取消选中状态以触发显示隐藏position input超过div您要点击的内容

＆＃13;

div + input:checked ~ div {
  display: none;
}
input {
  width: 20px;
  opacity: 0;
  border: 1px solid red;
  top: 0px;
  position: absolute;
}
.container {
  position: relative;
}

＆＃13;

<div class="container">
  <div class="trigger">Title</div>
  <input type="checkbox" />
  <div>description</div>
</div>

＆＃13;

Answer 2

可以使用：active选择器。但它非常局限于你可以执行的功能，并且不支持所有浏览器。

＆＃13;

.description{
	display: none;
}
.title:active + .description{
	display: block;
}

＆＃13;

<body>
   	<div class="title">Title</div>
	<div class="description">description</div>
</body>

＆＃13;

Answer 3

您可以使用伪类:focus来完成此操作。对于无法聚焦的元素，您必须添加tabindex

Fiddle

示例

<div tabindex="0" class="title">Title</div> <div class="desc">description</div> .desc { display: none; } .title:focus ~ .desc { display: block; }

Answer 4

您可以为div提供id并处理事件。

<div id="title">Title</div>
<div id="description">description</div>

$(document).on("click","#title",function(){

    $("#desc").toggle();

})

如果没有Javascript，您可以使用有效或悬停

#description{
    display: none;
}
#title:hover + #description{
    display: block;
}

Answer 5

也许您想要使用已包含此框架的框架，例如：

自举
http://getbootstrap.com/javascript/#collapse
的jQuery
http://webcloud.se/jQuery-Collapse/

祝你好运

当您使用鼠标单击另一个div时显示/隐藏div

5 个答案:

Fiddle