css窗口左右切换_纯CSS中HTML窗口切换事件

css窗口左右切换

In the past, animated expansion and contraction of web page elements in response to user clicks has been tied to JavaScript, particularly JQuery and other frameworks. I suspect this is partly due to web developer’s unfamiliarity with CSS3, the ubiquity of JQuery, desire for support in older versions of IE, and confusion about what selector to use: we know we can use :hover to initiate such events, but :hover is not a click. :focus and :active might work, but then how do you get “back” from that state to close the element again?

过去，响应用户点击的网页元素的动态扩展和收缩已与JavaScript绑定在一起，特别是JQuery和其他框架 。 我怀疑这部分是由于Web开发人员不熟悉CSS3，无处不在的JQuery，渴望在IE的较早版本中使用以及对使用哪种选择器感到困惑：我们知道我们可以使用:hover来发起此类事件，但是:hover不是点击。 :focus和:active可能有效，但是如何从该状态“返回”以再次关闭该元素？

Before I proceed it should be noted that I’m hardly the first to explore this area: notably, Corey Mwamba wrote a particularly good article on the subject over at the excellent Opera developer site. What follows are merely my thoughts, with a little form element accessibility trickiness, and what I think is a simpler and more elegant solution.

在继续之前，应该指出的是，我并不是第一个探索这一领域的人：值得注意的是， Corey Mwamba在Opera开发人员的出色网站上写了一篇有关该主题的特别出色的文章。 接下来的内容只是我的想法，带有一些表单元素可访问性的棘手问题，我认为这是一种更简单，更优雅的解决方案。

It seems obvious that in order to toggle a window event we need an HTML element that has distinct “on” and “off” states. Two immediately spring to mind: radio buttons and checkboxes. In HTML5, they’re valid in almost any context. I’ll place a checkbox element to act as our toggle switch inside a div with a class of window. Directly underneath the checkbox, we’ll place the content that is going to be shown and hidden. Assuming that this could be a lot of content, I’ll place it inside its own <div>. So the markup will look like this:

显然，为了切换窗口事件，我们需要一个HTML元素，该元素具有不同的“ on”和“ off”状态。 立即想到两个： 单选按钮和复选框 。 在HTML5中 ，它们几乎在任何上下文中都是有效的。 我将在一个带有一类window的div内放置一个checkbox元素，作为我们的切换开关。 在checkbox正下方，我们将放置要显示和隐藏的内容。 假设这可能有很多内容，我将其放在自己的<div> 。 因此标记将如下所示：

<div class="window">
	<input type="checkbox" class="toggle">
		<div>
			<p>Here’s my content. Beep Boop Blurp.</p>
		</div>
</div>

Next, I’ll add some CSS. The outer <div> will be styled as our window container element:

接下来，我将添加一些CSS。 外部<div>将被设置为我们的window容器元素：

div.window {
	color: white;
	width: 220px;
	padding: .42rem;
	border-radius: 5px;
	background: #c6a24b;
	margin: 1rem;
	text-align: center;
}

The inner <div> will initially be hidden by the fact that we’re going to set its height to 0 and overflow property to hidden, so that content does not “spill out” of the <div> and become visible:

内部的<div>最初将被以下事实隐藏：我们将其height设置为0并将overflow属性设置为hidden ，这样内容就不会“溢出” <div>并变得可见：

div.window div {
	height: 0px;
	margin: .2rem;
	overflow: hidden;
}

That pulls our outer <div> closed. Now to initiate our expansion. First, we’re going to change the selector used above to be a little more precise:

这使我们的外部<div>关闭。 现在开始我们的扩张。 首先，我们将更改上面使用的选择器，使其更加精确：

input.toggle ~ div {
	height: 0px;
	margin: .2rem;
	overflow: hidden;
}

This is the sibling selector. It will provide the same result in your browser as the code above. If you’re saying to yourself “Why not use an adjacent selector instead?” you’re right... but we’ll see why a sibling selector is better choice in a moment.

这是同级选择器 。 它将在您的浏览器中提供与上述代码相同的结果。 如果您对自己说：“为什么不使用相邻的选择器呢？” 您是对的...但是我们很快就会看到为什么同级选择器是更好的选择。

Now we can get to our open / close routine. The CSS status for a checked input is, not surprisingly, :checked… so we’ll use that to set the height of the inner <div> to show all of its contents.

现在我们可以进入打开/关闭例程。 毫不奇怪，选中输入CSS状态是:checked …，因此我们将使用它来设置内部<div>的height以显示其所有内容。

input.toggle:checked ~ div {
	height: 180px;
}

The neat part of this is the fact that we don’t have to worry about anything else: these two lines of code make the whole system work, and anything else we choose to add is an embellishment. Turning on the checkbox expands the inner <div>, which in turn expands the outer window.

整洁的部分是，我们不必担心其他任何事情：这两行代码使整个系统正常工作，而我们选择添加的其他内容都是一种修饰。 启用该复选框将扩展内部的<div> ，后者又扩展外部的窗口。

“但是我不要复选框！” (“But I Don’t Want A Checkbox!”)

Here’s the trick. We’re going to add a <label> after the checkbox. And we’re going to use the value of the label’s for attribute to link it to the checkbox, which will have a matching id. No CSS; this is all markup:

这就是窍门。 我们将在复选框后添加一个<label> 。 我们将使用标签的for属性的值将其链接到checkbox ，该checkbox将具有匹配的id 。 没有CSS； 这就是所有标记：

<div class="window">
	<input type="checkbox" class="toggle" id="punch">
	<label for="punch">Punch It, Chewie<label>
	<div>
		<p>Here’s my content. Beep Boop Blurp.</p>
	</div>
</div>

With the for attribute applied, the label acts as an alternate interface for the checkbox: clicking on the label is exactly the same as using the checkbox directly. Adding label elements has always been a best practice for form accessibility; as is so often the case, knowing and using even a little accessibility opens up a world of opportunity for all users.

启用for属性后， label充当checkbox的备用界面：单击label与直接使用checkbox完全相同。 添加label元素一直是表单 可访问性的最佳实践； 在通常情况下，了解和使用甚至很少的可访问性都会为所有用户打开一个充满机遇的世界。

(It should also be clearer why we used the sibling selector: placing the label between the checkbox and the inner div in the markup renders an adjacent selector null and void).

(还应该清楚为什么我们使用同级选择器：将label放在checkbox和标记中的内部div之间会导致相邻选择器无效。)

You can probably anticipate where we’re headed next. We can completely turn off the checkbox, and leave just the label:

您可能可以预测我们下一步的去向。 我们可以完全关闭checkbox ，仅保留label ：

input.toggle { display: none; }

The result still works!

结果仍然有效！

We can improve the default appearance of the label:

我们可以改善label的默认外观：

div.window label {
	display: block;
	background: #660b0b;
	border-radius: 5px;
	padding: .6rem;
}

We should also make it clear to the user that the label is an active interface:

我们还应该向用户表明label是活动接口：

div.window label:hover,
	div.window label:focus {
		cursor: pointer;
		background: #311;
}

It would also be nice to give the label a different look when the content is expanded:

扩展内容时，使label具有不同的外观也很不错：

input.toggle:checked + label {
	background: red;
}

Even though we no longer see the checkbox, its status can still influence the appearance of the label (and this is why the checkbox appears in the code before the label rather than after: we can’t yet do “reverse” selections in CSS).

即使我们不再看到该checkbox ，它的状态仍然会影响label的外观(这就是为什么该checkbox在代码中出现在label 之前而不是之后的原因：我们尚无法在CSS中进行“反向”选择) 。

Using a checkbox also makes it really easy to set the window to an open state by default: just place the checked attribute in the input:

使用checkbox也可以很容易地将窗口默认设置为打开状态：只需将checked属性放在input ：

<div class="window">
	<input type="checkbox" checked class="toggle" id="punch">

The label will continue to work: now clicking it the first time will close the window.

label将继续起作用：现在第一次单击它会关闭窗口。

“让它发芽！” (“Make It Go Sproing!”)

So far there’s no animation: the window div simply snaps open and closed. We’ll smooth this motion and add a little bit of anticipation and follow-through.

到目前为止，还没有动画：window div只是简单地打开和关闭。 我们将平滑此动作，并添加一些预期和后续操作 。

What this means is that when the animation begins, the affected element will recoil slightly: think of a pitcher winding up in anticipation of throwing a speedball in a game of baseball, his body curving backwards before the pitch. At the end of the animation the element will overshoot its mark slightly before recovering to its final state.

这意味着动画开始时，受影响的元素将稍微后退 ：想一想在棒球比赛中投掷快球的投手弯腰，他的身体在投球前向后弯曲。 在动画结束时，元素将略微超出其标记，然后恢复到最终状态。

input.toggle ~ div {
	height: 0px;
	margin: .2rem;
	overflow: hidden;
	transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}

结论 (Conclusion)

This technique has many possible applications, and just one downside: we must know the dimensions of the inner element when it is closed and open. You can define the element's height and width using whatever CSS unit you like, but we must state the dimensions explicitly. Alternatively, you can use max-height.

这种技术有许多可能的应用，但有一个缺点：当内部元素关闭和打开时，我们必须知道其内部尺寸。 您可以使用任何喜欢的CSS单位定义元素的height和width ，但是我们必须明确声明尺寸。 另外，您可以使用max-height 。

翻译自: https://thenewcode.com/506/HTML-Window-Toggle-Events-in-pure-CSS

css窗口左右切换