Question

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

我使用jQuery找到了一系列演示，但它们都需要启用javascript。任何帮助表示赞赏。

Answer 1

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

Answer 2

如果没有javascript，您无法切换点击次数。端。

<强>更新

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

所以我会说，几乎它仍然不可能 ......！

Answer 3

以下是一个简单的示例，您可以使用css创建切换，而无需任何JAVASCRIPT和JQUERY。您也可以使用css添加动画而不使用JQUERY。 CSS3太棒了！：）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

派对晚了大约三年，但是当我想要做同样的事情时，我找到了这个，对于移动菜单，随后找到了一个非常好的解决方案，所以我想我会发布它为其他人来打猎。

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

在CSS中，nav设置为“hidden”，nav：target设置为显示。该页面有两个菜单按钮，使用相同的图像，两个都有类menubutton，绝对位置在同一个地方。 menbuttonON有索引1000，在html menubuttonOFF中位于nav外面有索引1001，但是在nav内部，所以它最初是看不见的

在HTML中，单击menubuttonON链接到nav，然后是目标，所以它显示。导航内部是menubuttonOFF，具有更高的z指数比menubutton ON，所以现在在顶部。单击menubuttonOFF链接回到menubuttonON，所以导航不是目标，并消失，采取 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。

Answer 5

没有JavaScript，你要求的是不可能的。 （或as @Pointy has pointed out，CSS3选择器。）

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

Answer 6

对于接受的答案的更精确版本，通常的做法是组合隐藏的复选框+标签，以便能够在屏幕上显示可点击的标签，该标签映射到两个JavaScript都可用的隐藏支持值（{ {3}}）和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决策。我们可以使用:checked或adjacent sibling select +

抓取后续元素

 /* 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;
}

general sibling selector ~

中的工作演示＆amp; StackSnippets

＆＃13;

.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;
    
}

＆＃13;

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

＆＃13;

Answer 7

如果没有应用任何CSS或JavaScript，<details> element会按照您的要求执行操作。

当然不是div，所以它不会从字面上回答你的问题，但我读到了你要求有条件地揭露或隐瞒某些内容的要求。

<details>创建一个公开窗口小部件，只有当窗口小部件切换到“打开”状态时才能看到信息。可以使用<summary>元素提供摘要或标签。

不幸的是browser support for <details>并不完美，IE和Edge目前根本没有任何支持。边缘状态为Under Consideration。 IE的开发已停止，因此永远不会获得支持。

Answer 8

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

Answer 9

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

Answer 10

如果不使用Javascript或发送其他请求，则无法执行此操作。

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

当然，您必须注意页面的其余部分在请求后仍然存在;您可能必须使用表单才能继承用户可能输入的任何数据，这很可能意味着您的链接不能是链接，但必须是一个按钮（因为链接无法触发表单提交而无需Javascript ）。

Answer 11

使用JS禁用JS的方法是让超链接有一些href来完成你想要的任务 - 比如：

/该/原始/ URL？高级搜索=真

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

在不使用Javascript的情况下切换div

11 个答案:

中的工作演示＆amp; StackSnippets