我有一个小的登录表单,希望在禁用JavaScript的情况下显示它。Form具有类似的结构:
<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>
类为"下拉菜单"的div具有display:none初始值。当点击"a"标记或悬停时,它应该变为显示:块。在这里发现了类似的问题在没有jQuery的情况下在HTML和CSS中显示点击隐藏div,但只有标签和使用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"标记,在禁用时仅显示标签。
您需要一些可以切换的东西。除了javascript之外,更改html页面中某些状态的唯一方法是checkbox元素。通过一些技巧,这可以用来显示/隐藏其他元素。
看看这个例子http://jsfiddle.net/gSPqX/1/(不是我自己创造的)。它比您链接的解决方案简单一点,还使用了div.
基本上,诀窍是在css代码中使用+运算符来选择下一个同级元素。
input:checked + label + div { display: none; }
(取自小提琴)
因此,您有三个元素,复选框输入、标签和div。复选框用于保存当前状态,标签用于具有更大的可点击区域,div包含实际数据。
像这样使用noscript
:
<noscript>
<style>
#noscript{display:none !important;}
#container{display:none;}
</style>
</noscript>