php - 禁用 JavaScript 时显示/隐藏登录表单

Question

我有一个小型登录表单，希望在禁用 JavaScript 时显示它。表单具有类似的结构:

<a ...href="#"...>Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
<form action="/login/" method="post" ....>
.... form components ....
</form></div>

类为“dropdown-menu”的 div 有 display:none initial。当单击“a”标签或将鼠标悬停时，它应该更改为显示: block 。在这里发现了类似的问题 Show hide divs on click in HTML and CSS without jQuery但只有 label 和使用 tabindex 和 :focus 的解决方案。

完成 感谢@Florian，我已经解决了我的问题。如果有人感兴趣，这里是代码。

在 .html 文件中

<a class="dropdown-toggle" style="display:none" href="#" data-toggle="dropdown" id="navLogin">Login</a>

<input type='checkbox' style='display: none' id=cb>
<label class="dropdown-toggle" id="labelLogin" for=cb>Login</label>

<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
    <form ...... >
         ... Form Components...
    </form>
</div>

在 .css 文件中

input:checked + label + div { display: block; }
label {position: relative;

padding: 10px 15px;
color:#428bca;
}

在 .js 文件中

$('#navLogin').removeAttr('style');
$('#labelLogin').css('display', 'none');

以下代码将在启用 JavaScript 时显示“a”标签，在禁用时仅显示标签。

Answer 1

您需要可以切换的东西。除了 javascript 之外，更改 html 页面中某些状态的唯一方法是复选框元素。通过一些技巧，这可以用来显示/隐藏其他元素。

看看这个例子http://jsfiddle.net/gSPqX/1/ (不是我自己创建的)。它比您链接的解决方案要简单一些，并且还使用了一个 div。

基本上，诀窍是在选择下一个兄弟元素的 css 代码中使用 + 运算符。

input:checked + label + div { display: none; }

(取自 fiddle )

所以你有三个元素，checkbox-input，label 和 div。复选框用于保存当前状态，标签用于具有更大的可点击区域，div 包含实际数据。