Как скрыть элемент для переключения с помощью jquery при сохранении прогрессивного улучшения - PullRequest
Новая
       38

Как скрыть элемент для переключения с помощью jquery при сохранении прогрессивного улучшения

1 голос
/ 03 апреля 2012

Все ответы, которые я мог найти, рекомендовали добавить display: none для css ... но для пользователя без javascript он никогда не увидит элемент. 

jQuery(document).ready(function($){

    $('#toggleElm').hide();

    $('#toggleBtn').click(function(){
        $('#shareLink').slideToggle();
    })

});

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

<script type='javascript'> 
    document.write("<style type='text/css'> #toggleElm {display:none} </style>");
</script>

в верхней части тела просто кажется слишком хакерским.

Ответы [ 3 ]

1 голос
/ 03 апреля 2012

, чтобы не допустить JavaScript FOUC и сделать вашу страницу полностью доступной, вы должны применить класс .no-js в элементе <html>, а затем использовать этот класс для стилизации ваших элементов, точно так же, как шаблон html5 + modernizr do 

#toggleElm { display: none; }
.no-js #toggleElm { display: block; }

Конечно, вы должны скоро удалить этот класс с помощью javascript в <head> вашего документа с помощью такого скрипта 

<script>
    (function(d) { 
        d.className = d.className.replace(/(^|\b)no\-js(\b|$)/, 'js');
    }(document.documentElement));
</script>

, так что если javascript включен, онпревратит класс .no-js в класс .js.

При таком подходе ваша страница будет по-прежнему доступна, даже если javascript недоступен, поскольку в этом сценарии будет применено последнее правило CSS, в результате чего ваши элементы останутсявидимый и доступный.

0 голосов
/ 03 апреля 2012

Если вы не хотите ждать готовности документа, не ждите, пока документ будет готов. 

<p id="foo">Stuff...</p>
<script>
    document.getElementById('foo').style.display = 'none';
</script>
0 голосов
/ 03 апреля 2012

Элемент регистрируется в DOM, как только его закрывающий тег был проанализирован.

Следовательно, вы можете скрыть элемент сразу после этой вкладки; 

<div id="toggleElm">Foo</div>
<script>
    // Note: No $(document).ready()!
    $('#toggleElm').hide();
</script>

Очевидно, это зависит от того, загружен ли уже jQuery (то есть не включен внизу страницы). Если это так, вернитесь к обычному JavaScript: 

<div id="toggleElm">Foo</div>
<script>
    document.getElementById('toggleElm').style.display = 'none';
</script>
...