Переключатель скрытия/отображения Javascript работает в обоих направлениях в Opera, но только в других браузерах.

У меня есть настраиваемый сценарий переключения отображения/скрытия, который я использую вместе с переходами CSS3 для эффектов.

Сценарий показывает содержимое при нажатии и скрывает его при нажатии на ссылку «HideLink» с переходами CSS3 — но только в Opera.

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

См. этот JSfiddle: http://jsfiddle.net/xte63/


javascript toggle css opera transitions
person user1460149    schedule 16.06.2012    source источник
comment
Хорошо, это странно. Когда я работал над Fiddle, он не работал в Chrome при скрытии. Проблема в том, что код дает сбой при использовании в моем HTML. У меня есть скрипт и CSS в ‹head›.   -  person user1460149    schedule 16.06.2012
comment
@Derek Страница перезагружается вместо того, чтобы запускать функцию скрытия на моем Nightly 16. @ OP Я думаю, вы используете слишком много кода для чего-то такого простого ..   -  person Fabrício Matté    schedule 16.06.2012
comment
Это работает, если я не использую CSSText для стилизации JS и использую '.style.display', но я хотел добавить больше строк CSS в одну строку и не знал другого способа.   -  person user1460149    schedule 16.06.2012
comment
Более простой способ скрыть/показать — использовать HTML5: jsfiddle.net/DerekL/zGFNF.   -  person Derek 朕會功夫    schedule 16.06.2012
comment
Спасибо за скрипку. Знаете какой-нибудь метод для браузеров, отличных от HTML5 (которые можно было бы стилизовать с помощью CSS3)?   -  person user1460149    schedule 16.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

В наши дни с отображением/скрытием javascript я предпочитаю использовать атрибуты HTML5 data-*.

Это уже можно использовать в браузерах, отличных от HTML5, с помощью функций getAttribute и setAttribute.

Я быстро проверил его на IE7, Chrome и Opera, и, похоже, он работает.

http://jsfiddle.net/ThJcb/

function showHide(shID) {
    var exDiv = document.getElementById(shID);
    if(exDiv.getAttribute("data-visible") != 'false'){
         document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';  
         document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';  
         exDiv.setAttribute("data-visible" , 'false');
    } else { 
         document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';  
         document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';   
          exDiv.setAttribute("data-visible" , 'true'); 
    }
}

Это позволяет вам определить состояние div без проверки значений CSS.

EDIT: как указано в комментариях, в ссылке на скрытие была опечатка (onlick вместо onclick), из-за чего казалось, что вышеуказанный jsfiddle работал, а не работал. По крайней мере, не совсем так, как я сделал ошибку в логике, установив для «видимых данных» значение false вместо true.

Вот обновленный jsfiddle: http://jsfiddle.net/ThJcb/4/ (фрагмент javascript выше обновлен также)

person jussinen    schedule 16.06.2012
comment
Сценарий имеет проблему с перезагрузкой страницы при нажатии ссылки «Скрыть содержимое», см. этот обновленный JSFiddle с полем тела (прокрутите вниз до ссылки, щелкните ее, чтобы понять, что я имею в виду): jsfiddle.net/ThJcb/1 - person user1460149; 17.06.2012
comment
Обновление: скрипт перезагружал страницу, потому что ссылка «Скрыть содержимое» имела функцию «onlick», а не «onclick», из-за чего казалось, что скрипт работает, хотя на самом деле это не так :( См. этот обновленный JSFiddle: jsfiddle.net/ThJcb/3 - person user1460149; 17.06.2012
comment
Большое спасибо. Код прекрасно работает в JSFiddle. К сожалению, когда я тестировал его в своем HTML, он не загружался. Я думаю, это потому, что в JSFiddle для «Framework» установлено значение «No Wrap (head)» — есть предложения по настройке для работы с OnLoad? - person user1460149; 18.06.2012
comment
Не глядя на HTML, было бы трудно понять, почему это не работает. Может быть другая ошибка Javascript, Javascript настроен неправильно, неправильная разметка HTML. - person jussinen; 18.06.2012
comment
У меня есть JS и CSS, встроенные в ‹head›. См. разметку из этой вставки на тестовой HTML-странице (jmarshall.com/easy/html/ f_testbed.html), чтобы проверить в Chrome/Opera: pastebin.com/Mnp0jVs7 - person user1460149; 18.06.2012
comment
Скрипт на тестовом стенде работает на Opera 12.00. Похоже, Chrome не работает из-за соображений безопасности (скрипт обнаружен в запросе). Вы пробовали это в обычном html-файле? - person jussinen; 18.06.2012
comment
Что ж, это загадка. У меня работает (наконец-то). Код pastebin (при копировании из верхнего раздела) работает, как ни странно, в то время как исходные «сырые» данные pastebin (скопированные из JSFiddle), похоже, не работают. Ну, во всяком случае, это работает благодаря вашим усилиям! - person user1460149; 18.06.2012