Я пытаюсь улучшить меню моего сайта немного путем использования JQuery аккордеона плагин:jQuery + Modernizer - Не отображать div, если javascript отключен? (См код)
http://jqueryui.com/accordion/
Это отлично работает, и я думаю, что это отличный плагин использовать ... Однако, я заметил, что она требует определенного макета для достижения этих результатов:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
ETC...
</p>
</div>
NB: repeated for every result
</div>
Сейчас это небольшая проблема в том, что, когда Javascript отключен, вся продукция это меню отображается (все категории и содержащие информацию).
Это просто слишком много информации для вывода сразу, и именно по этой причине она была разбита на PHP в первую очередь. В сущности, это будет выглядеть следующим образом:
// No category selected
* Fruits
* Vegetables
// Category selected
o Fruits
- Apples
- Oranges
* Vegetables
// Javascript Disabled
o Fruits
- Apples
- Oranges
* Vegetables
- Potatoes
- Onions
Так что я хотел бы сделать, это предоставить альтернативные средства навигации для пользователей, которые отключили JavaScript (старое меню, которое полностью функционален и работает независимо).
Я в настоящее время использовать несколько вариантов в реформатором:
Чтобы увеличить поддержку браузера на некоторые свойства CSS я использовал. Я знаю, что его можно использовать для определения того, включен ли javascript, добавив в тег body класс «js».
Итак, я решил попробовать обернуть старое меню внутри содержащего div и новое меню внутри содержащего div. Моя идея состоит в том, что я могу использовать эти divs с display: none;.
Прежде, чем я продолжу, я действительно просто угадываю здесь, поэтому, если я собираюсь сделать это неправильно ... Я был бы признателен, если бы кто-то мог указать мне в правильном направлении. С этим из пути, я нашел статью на StackOverflow, что относится к этому:
PHP & <noscript> combination to detect enabled JavaScript in browser
И с моей очень ограниченное знание JQuery адаптировали его немного, чтобы соответствовать, что я надеюсь достичь:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
</script>
Теперь проблема, с которой я столкнулась, заключается в том, что я не могу заставить этот скрипт регистрироваться или делать какие-либо заметные различия. Когда я смотрю тег тела в источнике, на теге тела нет класса. Меню не запускается, как я думал, и я теперь через некоторое время ... Очень смутно.
Если бы кто-нибудь мог предложить мне помощь, совет, информацию или указание, которые помогут мне решить эту проблему, я бы действительно, ДЕЙСТВИТЕЛЬНО оценил это!
Спасибо, что нашли время, чтобы прочитать мою историю!:)
EDIT:
@RomainPaulus предложил это, и она работает:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
})
</script>
Я дам попробовать, количество jQuery, которое я понимаю, шокирует :) Большое вам спасибо за предложение! –