Можно ли распечатать DIV, который скрыт функцией «slideUp» в jQuery?

Question

У меня есть простая страница типа «аккордеон», содержащая список заголовков H3 и блоков содержимого DIV (за каждым H3 следует DIV). На этой странице я начинаю со всех скрытых DIV. При нажатии на H3 DIV непосредственно под (после) открывается функцией jQuery «slideDown» , в то время как все остальные DIV скрываются функцией «slideUp» .

Функция «slideUp» вставляет следующий встроенный стиль в указанные DIV:

style="display: none;"

Мне интересно, есть ли способ показать все развернутые DIV, когда пользователь печатает страницу (как и я, когда у пользователя отключен JavaScript).

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

Есть ли другое решение?

Решение

Решение Sugendran великолепно и работает в браузерах (FF2, IE7 и IE6), которые я тестировал до сих пор. Я не знал, что есть какой-то способ переопределить встроенные стили, и я уверен, что это то, что я искал раньше, так что это здорово узнать. Я также вижу, что этот ответ здесь относительно этого. Я бы хотел, чтобы поиск не был таким сложным для навигации: -).

Решение Ли Теобальда было бы здорово, но функция "slideUp" добавляет стиль = "display: none;" немного.

Мое решение работает нормально, но излишне, когда работает! Важное объявление.

Answer 1

Вы можете использовать условие! Important в CSS. Это заменит встроенный стиль.

Итак, если вы настроили таблицу стилей для печатных СМИ - вы можете сделать что-то вроде

div.accordian { display:block !important; }

Answer 2

Лично я бы сделал это по-другому. Вместо того, чтобы JQuery добавлял встроенный стиль, почему бы не заставить его добавить класс вместо этого?

<div class="closed">...</div>

Тогда у вас может быть две таблицы стилей: одна для экрана, другая для печати:

<link href="screen.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>

В вашем screen.css вы бы определили закрытое ...

div.closed { display: none; }

Но в вашем файле print.css вы этого не сделаете (или не включите отображение: нет). Таким образом, когда дело доходит до печати, все элементы div будут расширены, но на экране они будут закрыты.

Answer 3

Создание «отображения в виде блока» всех элементов внутри аккордеона охватит все элементы внутри.

#accordion > *{ display:block !important; }

Answer 4

{дисплей: блок! Важный; } работает в FF, но я где-то читал, что он не будет работать с ie6. Нет ли события javascript для печати? Я помню, как много раз искал раньше и не мог найти один, кажется безумным, что этого не существует, js, кажется, знает, когда что-то еще происходит внутри браузера, но по какой-то причине слепо к печати: (

казарка @ mimoYmima.com

Answer 5

Да.

При загрузке добавить класс (например, "hideme") для всех соответствующих DIV, например:

$('div#accordion> div').addClass('hideme');

Примечание: это означает, что аккордеон прекрасно работает, когда JavaScript отключен.

Таким образом, ваша обычная таблица стилей может указывать класс «hideme» следующим образом:

.hideme { display: none; }

В то время как ваша таблица стилей печати может указывать класс hideme следующим образом:

div.hideme { display: block; }

Далее, в функции «click», которую вы добавляете в каждый H3, после скольжения DIV добавьте класс «hideme» и затем удалите атрибут «style» из каждого DIV, который был перемещен вверх.

Общий jQuery для этого выглядит следующим образом:

<script type="text/javascript">
 //<![CDATA[
    $(function() {
        $('#accordion> div').addClass('hideme');

        $('#accordion> h3').click(function() {
          $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast', function(){ $('#accordion> div:hidden').addClass('hideme').removeAttr('style'); });

      });
    });
 //]]>
</script>

Обратите внимание на необходимость включения функции обратного вызова в функцию slideUp, чтобы изменения стиля и класса происходили после того, как DIV сдвинулся вверх, а jQuery добавил "style = display: none;"