Показать/скрыть форму для входа в систему, если 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> 

div с классом "выпадающее меню" есть дисплей: нет начальный. И когда вы нажимаете «a» или наведите указатель мыши, он должен измениться на отображение: block. Найденный simillar вопрос здесь Show hide divs on click in HTML and CSS without jQuery, но есть решение только для ярлык и с использованием 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 включен и будет отображаться только метка, когда она отключена.

Answer 1

Вам нужно что-то, что вы можете переключать. Рядом с javascript единственным способом изменить какое-либо состояние на странице html является элемент флажка. С некоторыми трюками это можно использовать для отображения/скрытия других элементов.

Посмотрите на этот пример http://jsfiddle.net/gSPqX/1/ (Не создано мной). Это немного проще, чем решение, которое вы связали, а также использует div.

В принципе, трюк заключается в том, чтобы использовать оператор + в коде css, который выбирает следующий элемент родства.

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

(Взято из скрипки)

Так у вас есть три элемента, флажок-ввод, метка и Див. Флажок используется для сохранения текущего состояния, для метки используется большая область с кликами, а div содержит фактические данные.

Answer 2

Использование noscript так:

<noscript> 
    <style> 
     #noscript{display:none !important;} 
     #container{display:none;} 
    </style> 
</noscript>