Question

我知道如何折叠（显示/隐藏）div：

＆＃13;

$('#nav').click(function() { $('#hello').toggleClass('hidden'); });

＆＃13;

.hidden { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>

＆＃13;

是否可以在没有Javascript / jQuery的情况下执行此操作？

我已经尝试了this question的主要答案，但它不起作用，详见here。

Answer 1

您可以使用:checked选择器。

＆＃13;

#hidden {
  display: none;
  height: 100px;
  background: red;
}
:checked + #hidden {
  display: block;
}

＆＃13;

<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>

<label for="my_checkbox">Show/hide</label>

＆＃13;

Example fiddle

Answer 2

是的，它是，但它并不整洁。它涉及:target选择器，您可以在其中将样式应用于活动元素/ id。如果我们将导航内容包装在链接中，我们可以应用一个在我们的CSS中调用活动规则的主题标签。

在下行情况下，除非被...... JavaScript阻止，否则会将页面跳转到该位置。

a {
  color: #000;
  text-decoration: none;
}
  
#hidden {
  display: none;
}

#hidden:target {
  display: block;
}

<div id="nav"><a href="#hidden">NAV</a></div>
<div id="hidden">Hello</div>

没有JavaScript的折叠

2 个答案: