2015-07-24 2 views
0

Я продвигаюсь по проекту с использованием бутстрапа и до сих пор так хорош.Bootstrap & Javascript

Только что узнал о jquery. Я использую удаленные действия везде, где это возможно, до того момента, когда я хочу полностью загрузить jQuery.

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

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

Если в случае, когда bootstrap требует js? Если это так значит создать сайт, который будет деградировать изящно, мне нужно создать версию начальной загрузки и не загрузочную версию?

ответ

0

Обратитесь к странице this, для меня это похоже, вы можете добавить некоторые специальные CSS для этого.

0

Я бы не зашел так далеко, как строил две версии сайта. Если раскрывающийся список является вашей единственной проблемой, я бы посмотрел на обнаружение, когда включен javascript, и внедряя версию раскрывающегося списка только для CSS (используя: hover и/или: active), когда javascript не запущен.

Библиотеки, такие как Modernizr, отлично справляются с обнаружением функций html5 и т. Д., Но если вы хотите только определить, включен ли javascript, то самый быстрый способ, о котором я могу думать, - добавить класс к телу или html-тегам и просто удалить его как часть вашей инициализации JS. Что-то вроде этого:

HTML:

<body class="nojs"> 
    <!-- ... HTML content --> 
</body> 

Javascript:

jQuery(document).ready(function($) { 
    $('body').removeClass('nojs'); 
}); 

Это позволит вам написать простой CSS, чтобы вызвать видимость выпадающий Когда JavaScript отключен. Что-то вдоль линий:

CSS:

body.nojs .dropdown:active > li, 
body.nojs .dropdown:hover > li { 
    display: block; 
} 

Если вам нужно больше разъяснений о том, как получить эту работу на вашем конкретном месте я должен был бы увидеть некоторые из существующего HTML-разметки, но мы надеемся, этого должно быть достаточно, чтобы вы на правильном пути :)

Смежные вопросы