不使用 Javascript 切换 div

Toggle divs without using Javascript

提问by Sydney Smith

I'd like to toggle a <div>, but my requirement is that it must work with javascriptturned off. I would like to select a hyperlink that states "modify search" and the div that contains the search criteria displays.

我想切换 a <div>，但我的要求是它必须javascript关闭。我想选择一个显示“修改搜索”和包含搜索条件的 div 的超链接。

I've found a TON of demos using jQuery, but they all require javascriptenabled. Any assistance is appreciated.

我发现了大量使用 的演示jQuery，但它们都需要javascript启用。任何帮助表示赞赏。

回答by Pointy

Here you go, skipper!(edit— updated for science)

来了，船长！（编辑- 为科学更新）

HTML:

HTML：

<label for=cb>Click Here</label>
<input type='checkbox' style='display: none' id=cb>
<div>
    Hello. This is some stuff.
</div>

CSS:

CSS：

input:checked + div { display: none; }

回答by Sydney Smith

Here is the simple example follow this and you will be able to create toggle using css without any JAVASCRIPT and JQUERY. You can also add animations using css without JQUERY. CSS3 is AWESOME! :)

这是遵循此的简单示例，您将能够使用 css 创建切换，而无需任何 JAVASCRIPT 和 JQUERY。您还可以在不使用 JQUERY 的情况下使用 css 添加动画。CSS3 太棒了！:)

.box{width:200px;
height:0;
background:red;
transition:all 0.4s linear;}
input:checked ~ .box{height:220px;}

<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box"> </div>

回答by gdoron is supporting Monica

You can't toggle on clicks without javascript. End.

没有 javascript，您无法切换点击。结尾。

Update:

更新：

If you can use CSS 3selectors, you'll have to change your DOM structure and use CSS 3selectors without a library that covers old browsers which are probably a lot more common than users with javascript off, You can usee @pointy answer with :selected.

如果您可以使用CSS 3选择器，则必须更改 DOM 结构并使用CSS 3没有库的选择器，该库涵盖旧浏览器，这可能比关闭 javascript 的用户更常见，您可以使用 @pointy 回答:selected.

So I would say, practicallyit's still impossible...!

所以我会说，实际上这仍然是不可能的......！

回答by KyleMit

For a little more polished version of the accepted answer, a common practice is to combine a hidden checkbox + label to be able to have a clickable label on screen that maps to a hidden backing value that is available to both JavaScript (.checked) and to CSS (:checked)

对于已接受答案的更完善版本，通常的做法是组合隐藏复选框 + 标签，以便能够在屏幕上有一个可点击的标签，该标签映射到对 JavaScript ( .checked) 和 CSS都可用的隐藏支持值( :checked)

<input type='checkbox' id='css-toggle-switch' checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>Error Details</label>
<div class='css-toggle-content'>
   <pre><code>Unexpected StackOverflow</code></pre>
</div >

By putting our checkbox first, we can drive CSS decisions based on the :checkedselector. We can grab subsequent elements with the adjacent sibling select +or the general sibling selector ~

通过将我们的复选框放在首位，我们可以根据:checked选择器驱动 CSS 决策。我们可以使用相邻的兄弟选择器+或一般的兄弟选择器来抓取后续元素~

 /* always hide the checkbox */
.css-toggle-switch { display: none; }

/* update label text to reflect state */
.css-toggle-switch         + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }

 /* conditionally hide content when checked */
.css-toggle-switch:checked ~ .css-toggle-content  { display: none; }

/* make the label look clickable */
.css-toggle-switch + label {
   cursor: pointer;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

Working Demo in jsFiddle& StackSnippets

jsFiddle和 StackSnippets 中的工作演示

.css-toggle-switch { display: none; }
.css-toggle-switch         + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
.css-toggle-switch:checked ~ .css-toggle-content  { display: none; }

.css-toggle-switch + label {
   cursor: pointer;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}



/* just some styles to make the demo a little more pleasant */
.btn {
  padding: 5px 10px;
  background: white;
  border: 1px solid grey;
  border-radius: 3px;
  width: 130px;
  display: inline-block;
  text-align: center;
}
.btn:hover {
  background: #e6e6e6;
  -webkit-box-shadow: inset 0 -1px 0 #dddddd;
     -moz-box-shadow: inset 0 -1px 0 #dddddd;
          box-shadow: inset 0 -1px 0 #dddddd;
}
.panel {
    padding: 15px;
    background: #ffe06d;
    border: 1px solid #d69e01;
    border-radius: 3px;
}
pre {
  padding: 5px;
  margin-bottom: 0;
  background: #eaeaea;
  border: 1px solid grey;
    
}

<div class="panel">
  <input type='checkbox' id='css-toggle-switch' 
          checked='checked' class='css-toggle-switch'>
  <label for='css-toggle-switch' class='btn'>
    Error Details
  </label>
  <div class='css-toggle-content'>
     <pre><code>Unexpected StackOverflow</code></pre>
  </div >
</div>

回答by nikc.org

The <details>elementdoes what you ask without any CSS or JavaScript applied.

该<details>元素在没有应用任何 CSS 或 JavaScript 的情况下执行您的要求。

It is of course not a div, so it doesn't answer your question literally, but I read your requirement being having some content you wish to conditionally reveal or conceal.

它当然不是div，所以它不能从字面上回答你的问题，但我读到你的要求是有一些你希望有条件地显示或隐藏的内容。

The <details>creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary>element.

将<details>创建一个公开部件，其中只有当小部件被切换到“开”的状态信息是可见的。可以使用该<summary>元素提供摘要或标签。

Unfortunately browser support for <details>is less than perfect, IE and Edge currently having no support at all. Edge status is Under Consideration. Development of IE is stopped so it will never gain support.

不幸的是，浏览器对<details>IE 的支持并不完美，IE 和 Edge 目前根本不支持。边缘状态为考虑中。IE 的开发已停止，因此永远不会获得支持。

回答by Megan Kerr

About three years late to the party, but I found this when I was looking to do the same thing, for a mobile menu, and subsequently found a very good solution, so I thought I'd post it for whoever else comes a-hunting.

聚会晚了大约三年，但是当我想为移动菜单做同样的事情时我发现了这个，随后找到了一个非常好的解决方案，所以我想我会把它发布给其他任何人.

The basic idea was from this article: http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800. I think I've used a slightly simpler approach (stumbled on while setting it all up). This hides / displays the navigation, by clicking the Menu button.

基本思想来自这篇文章：http: //www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800。我想我使用了一种稍微简单的方法（在设置时偶然发现）。这通过单击菜单按钮隐藏/显示导航。

In the CSS, nav is set as "hidden" and nav:target is set to display. The page has two menu buttons, using the same image, both have class menubutton, absolute position in the same place. menbuttonON has index 1000, sits outside nav in the html menubuttonOFF has index 1001, but sits inside nav, so it's invisible at first

在 CSS 中，nav 设置为“隐藏”，nav:target 设置为显示。页面有两个菜单按钮，使用同一张图片，都有类menubutton，绝对位置在同一个地方。menbuttonON 的索引为 1000，位于 html 中的导航之外 menubuttonOFF 的索引为 1001，但位于导航内，因此一开始是不可见的

In the HTML, clicking menubuttonON links to nav, which is then target, so it displays. Inside that nav is menubuttonOFF, with a higher z-index than menubutton ON, so that's on top now. Clicking menubuttonOFF links back to menubuttonON, so nav isn't the target, and disappears, taking menubuttonOFF with it.

在 HTML 中，单击 menubuttonON 链接到导航，然后导航到目标，因此它会显示。在那个导航里面是 menubuttonOFF，z-index 比 menubutton ON 高，所以现在是最上面的。单击menubuttonOFF 链接回menubuttonON，因此nav 不是目标，并消失，同时带走menubuttonOFF。

Simplified CSS (without site-specific formatting):

简化的 CSS（没有特定于站点的格式）：

nav {display: none;}
nav:target {display: block !important;}
.menubutton { position: absolute;
text-align: right;
top: 0;
margin-top: 14%;} /* This margin puts it below the header logo */
.menubuttonON {z-index: 1000;}
.menubuttonOFF {z-index: 1001;}

HTML

HTML

<header> <!-- logo here --> </header>
<div class="menubutton menubuttonON" name="buttonON"><a href="#nav"><img src="../Images/menubutton.png">MENU</a></div>

<nav id="nav" name="nav">

<div class="menubutton menubuttonOFF"><a
href="#buttonON"><img src="../Images/menubutton.png">CLOSE</a></div>
<ul> <!-- all the navigation stuff --> </ul>
</nav>

You can see it working here: http://www.thewritersgreenhouse.co.uk/storyelements_resources/storyelements.htm.

你可以在这里看到它的工作：http: //www.thewritersgreenhouse.co.uk/storyelements_resources/storyelements.htm。

回答by Brad

What you ask is impossible without JavaScript. (Or, as @Pointy has pointed out, CSS3 selectors.)

没有 JavaScript，你问的事情是不可能的。（或者，正如@Pointy 指出的那样，CSS3 选择器。）

You will have to modify your requirements, or better yet, just display the form by default and hide for JavaScript users (if necessary). Your page can work for everyone, and have unimportant features disabled for those that cannot use them.

您将不得不修改您的要求，或者更好的是，只需默认显示表单并为 JavaScript 用户隐藏（如有必要）。您的页面适用于所有人，并为无法使用它们的人禁用不重要的功能。

回答by ayyp

No Javascript, no toggling. There are some pseudo CSS3 methods, but if you have to support JS off, you're certainly not supporting CSS3.

没有Javascript，没有切换。有一些伪 CSS3 方法，但是如果您非要支持 JS，那您肯定不支持 CSS3。

回答by kevin628

As others have said, you must use JS to achieve toggling of divs. If you want your website to work with javascript disabled, you need to design your website to fail gracefully when javascript isn't available. In other words, your website should NOT rely on JavaScript to function. Ex: AJAX forms should fall back to HTTP submit, etc.

正如其他人所说，您必须使用 JS 来实现 div 的切换。如果您希望您的网站在禁用 javascript 的情况下工作，您需要将您的网站设计为在 javascript 不可用时优雅地失败。换句话说，您的网站不应依赖 JavaScript 来运行。例如：AJAX 表单应该回退到 HTTP 提交等。

回答by tdammers

You can't do it without using either Javascript or sending another request.

如果不使用 Javascript 或发送另一个请求，您就无法做到这一点。

If you can live with the extra request (that is, an added page load is OK), then the most straightforward solution is to point the link to the current URL, but add a query string parameter, e.g. http://example.com/current-page?showsearch=1. Then, on the server, check if the showsearchparameter is set, and if so, initialize the search div to be visible.

如果您可以接受额外的请求（即添加页面加载是可以的），那么最直接的解决方案是将链接指向当前 URL，但添加一个查询字符串参数，例如http://example.com/current-page?showsearch=1. 然后，在服务器上，检查是否showsearch设置了参数，如果设置了，则将搜索div初始化为可见。

Of course you will have to take care that the rest of your page state survives the request; you may have to use a form to be able to carry over any data the user may have entered, and this most likely means your link can't be a link, but has to be a button (because links cannot trigger form submits without Javascript).

当然，您必须注意页面状态的其余部分在请求后仍然存在；您可能必须使用表单才能携带用户可能输入的任何数据，这很可能意味着您的链接不能是链接，而必须是按钮（因为链接无法在没有 Javascript 的情况下触发表单提交）。