19

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

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

4

11 回答 11

38

给你，船长！（编辑——科学更新）

HTML：

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

CSS：

input:checked + div { display: none; }

编辑- 附加说明：display: none将导致某些浏览器 (IE) 不注意该<input>复选框。除了使用displayCSS 属性隐藏它，您还可以使用类似position: absolute; left: -10000px;.

于 2012-06-13T21:56:47.973 回答
14

下面是一个简单的示例，您将能够使用 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>

于 2016-06-27T09:58:09.077 回答
12

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

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

创建一个披露小<details>部件，其中信息仅在小部件切换到“打开”状态时可见。可以使用该<summary>元素提供摘要或标签。

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

于 2018-06-12T11:33:20.097 回答
5

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

更新：

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

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

于 2012-06-13T21:50:48.053 回答
4

对于已接受答案的更精致版本，一种常见的做法是将隐藏的复选框 + 标签组合在一起，以便能够在屏幕上拥有一个可点击的标签，该标签映射到 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 >

通过将复选框放在首位，我们可以根据: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;
}

截屏演示

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>

于 2018-01-24T21:06:28.417 回答
3

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

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

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

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

简化的 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

<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>

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

于 2015-03-14T19:13:10.867 回答
2

如果没有 JavaScript，您所问的问题是不可能的。（或者，正如@Pointy 指出的那样，CSS3 选择器。）

您将不得不修改您的要求，或者更好的是，默认情况下只显示表单并为 JavaScript 用户隐藏（如果需要）。您的页面可以为所有人工作，并且为那些无法使用它们的人禁用不重要的功能。

于 2012-06-13T21:50:14.773 回答
1

没有Javascript，没有切换。有一些伪CSS3的方法，但如果你必须支持JS关闭，你肯定不支持CSS3。

于 2012-06-13T21:51:42.423 回答
0

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

于 2012-06-13T21:52:34.543 回答
0

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

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

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

于 2012-06-13T21:54:40.993 回答
0

在禁用 JS 的情况下使其工作的方法是让超链接有一些 href 来完成您想要的任务 - 例如：

/the/original/url?advanced-search=true

当 ?advanced-search=true 存在时，Web 服务器提供不同的内容。如果启用了 JS，您研究的 jquery 代码应该只是取消原始操作。

于 2012-06-13T21:54:49.347 回答