如何使用纯HTML/CSS在点击时显示/隐藏div

Question

我正在为我的个人网站设计侧边栏，希望在访客点击Facebook图标时显示/隐藏Facebook关注按钮。我想知道是否可以只使用HTML/CSS实现，如果不行，使用JavaScript最简单的方法是什么。我看到了很多jQuery的解决方案，但还没有找到纯粹的HTML/CSS解决方案。

<div class="sidebar-follow">                            
    <div class="sidebar-follow-icon">
        <img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
    </div>
    <div class="sidebar-follow-button">
        This is the follow button.
    </div>                      
</div>

点击 .sidebar-follow-icon 应该会显示 .sidebar-follow-button ，再次点击 .sidebar-follow-icon 则会隐藏 .sidebar-follow-button。

- LaGuille

---

HTML和CSS没有点击处理程序。可能需要使用复选框和标签的某些hacky方法，但最好使用JavaScript。通常情况下，HTML =文档描述，CSS =文档布局/外观，JavaScript =响应客户端操作。 - Jon P

请查看这个网站，它已经完成了：http://bonrouge.com/br.php?page=cssonclickswitch - Provision

Answer 1

Html

<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>

CSS

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
.facebook {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
   display: none;
}

编辑器 这里，更多关于 csstricks 的内容。

- Ghostff

---

我发现当复选框的“top”属性设置为-9999px时，每当我按下标签时，它会使我的屏幕滚动到顶部。要解决这个问题，只需删除“top”属性，但保留“left”属性即可。 - Callum Watkins

Answer 2

这在 HTML / CSS 中通常不会这样做，最适合使用 Javascript、JQuery 等。

但这让我想到了... 是否可能。

以下是我使用纯 CSS 所能实现的最接近效果：http://jsfiddle.net/a92pkeqw/

我的理由是：唯一可以保存其“状态”的元素是复选框。因此，这是唯一可以产生切换效果的元素。使用 CSS 中的切换和 ~ 选择器，可以编辑另一个元素的样式，本例中更改可见性属性。

HTML：

<input type="checkbox" class="toggle"></input>

<div class="toggled">
    Text that be hidden dynamically!
</div>

CSS：

input[type='checkbox']:checked ~ .toggled
{
    visibility: hidden;
}

input[type='checkbox'] ~ .toggled
{
    visibility: visible;
}

- James Taylor

Answer 3

可以使用复选框实现，但我更喜欢使用JavaScript进行交互。

#fbCheck {
    display:none;
}


#fbCheck:not(:checked) ~ .sidebar-follow-button
{
    display:none;
}



#fbCheck:checked ~ .sidebar-follow-button
{
    display:block;
}

<div class="sidebar-follow">
    <input type="checkbox" id="fbCheck" />
    <label for="fbCheck">
        <div class="sidebar-follow-icon">
            <img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
        </div>
     </label>
     <div class="sidebar-follow-button">This is the follow button.</div>

</div>

顺便说一句，当可以用一个点击完成时，你真的希望你的用户进行两次点击来完成某些操作吗？

- Jon P

---

Facebook的默认关注按钮不太好看，也无法修改。我可能会在侧边栏上添加Twitter和YouTube的订阅按钮，并将它们隐藏在我设计的大按钮后面。 - LaGuille

关于您的代码，您能否修改它以始终保持侧边栏跟随图标可见？ - LaGuille

Answer 4

我们有一个类似的需要，需要一个仅使用CSS的解决方案，并发现在以下条件下可以实现：（1）复选框“按钮”和要切换的项目都位于同一整体容器内，例如body、div或p，并且要切换的项目不是通过位于子容器中来分离的；（2）标签和复选框输入必须在要切换的项目之前定义。

- Ray Bernard

Answer 5

我认为你不能在没有JavaScript的情况下做到这一点。

最简单的方法（但不是最好的方法）是将onclick属性添加到<div>标记中。

这个例子使用纯JS。

JS

function toggleImage(){
  var div = document.getElementsByClassName('sidebar-follow-icon')[0];

  if (!div.style.display || div.style.display === 'block') div.style.display = 'none';
  else div.style.display = 'block';
}

HTML

<div class="sidebar-follow">                            
    <div class="sidebar-follow-icon">
       <h1>a</h1>
    </div>
    <div class="sidebar-follow-button" onclick="toggleImage();">
        This is the follow button.
    </div>                      
</div>

在编程中，不建议通过HTML附加JavaScript代码，而应该使用addEventListener函数来附加点击事件。

- ianaya89