Работа с расширяемым содержимым jQuery, если отключен JavaScript

Question

У меня есть инструмент для обмена сообщениями на веб-сайте, над которым я сейчас работаю. Идея состоит в том, чтобы иметь заголовок div и подробный div (display = "none") для каждого сообщения.

В идеале, если включен javascript, у меня есть только заголовок, показывающий, и когда пользователь нажимает на него, подробности div открываются.

Это нормально, но как мне работать, если javascript отключен? Я думал о расширении всех сообщений, если они отключены, но я не хочу кратковременного мерцания, когда страница загружает все открытые изображения и, если включен JavaScript, они сворачиваются.

Я использую ASP.NET и собирался проверить состояние javascript на стороне сервера браузера, но обнаружил, что это невозможно сделать чисто.

Любые предложения о том, как этого добиться?

Answer 1

Один вариант - поместить это в вашу голову (после определенных стилей):

<noscript>
<style type="text/css">
#mydivid {display: block;}
</style>
</noscript>

РЕДАКТИРОВАТЬ: Я действительно отправил лучший ответ , который работает от правильного состояния по умолчанию.

Answer 2

На самом деле, наиболее семантически правильный способ, которым вы могли бы это сделать, это добавить другую таблицу стилей в заголовок через javascript, содержащий стили, которые будут реализованы, если javascript включен.

В вашем примере вы сохраните отображение по умолчанию для рассматриваемых элементов.

Затем вы создадите дополнительную таблицу стилей (например, js-enabled-styles.css) и разместите свой дисплей: ни один в этом.

Затем в теге script в вашей голове вы добавите дополнительную таблицу стилей. Используя jquery это будет:

$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');

Answer 3

Полагаю, вы ищете тег <noscript>.

Вы можете достичь результата, который вы описываете, одним из нескольких способов, но вот довольно простой. Определите стиль по умолчанию для div s следующим образом:

<style type="text/css">
     div.details
     {
         display: none;
     }
</style>

И после этого тега style используйте блок noscript, чтобы переопределить стиль по умолчанию (с включенным JavaScript), например:

<noscript>
<style type="text/css">
     div.details
     {
         display: block;
     }
</style>
</noscript>

Answer 4

Вы правы, сервер может сказать вам только, если в браузере есть JavaScript, он не имеет ни малейшего представления, включен он или нет.

Вы можете попробовать не использовать onready или onload, просто поместите строки в нижней части JavaScript, чтобы скрыть содержимое. Возможно, вы даже захотите разместить его сразу после элементов на странице.

<div id="foo">
    asdf
</div>
<script type="text/javascript">
    jQuery("#foo").css("display","none");
</script>

Примечание, звучит так, как будто вы должны использовать список определений вместо двух div. Было бы, вероятно, больше смысла для человека, использующего программу чтения с экрана.