Как использовать .toggle() для отображения div в виде таблицы

ProgramBox

Как использовать .toggle() для отображения div в виде таблицы

Post author:admin
Запись опубликована:30 января, 2023
Post category:Вопросы по программированию

#jquery #css

Вопрос:

У меня есть скрытый div, который должен отображаться как a table вместо block . Поведение toggle по умолчанию заключается в отображении изначально скрытого ( display: none; ) объекта как block ( display: block; ) . Но вместо этого я хочу отобразить его как table ( display: table; ) (см. Это, чтобы понять, почему это может быть полезно, если вы сомневаетесь в моем здравомыслии). Возможно ли это?

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

Последний вариант, возможно, использовать что-то вроде .css('display', 'table') , но toggle было бы приятнее и чище, если бы его можно было использовать.

Пример:

 <div id="hidden_table" style="display: none;">                             
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 1</div>                         
    <div style="display: table-cell;">Cell 2</div>                         
  </div>                                                                   
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 3</div>                         
    <div style="display: table-cell;">Cell 4</div>                         
  </div>                                                                   
</div>                                                                     
<a onclick='jQuery("#hidden_table").toggle();'>Click Me</a>

В этом примере свойство display будет установлено на block значение при нажатии кнопки «Щелкнуть меня». Но я бы хотел, чтобы для него было установлено значение table . И, конечно, я знаю, что этого можно достичь, создав некоторый пользовательский код, как я писал ранее. Но я хочу знать, есть ли какой-то трюк, .toggle() который мне не хватает?

Ответ №1:

Напишите переключатель самостоятельно, например,

 function toggleDisplay(element) {
  var display = element.css('display');
  element.css('display',(display==="table")?"none":"table");
}

И используйте его с помощью,

 toggleDisplay($('#element'));

1. проблема в том, что ему может понадобиться анимированный эффект toggle , может ли это анимировать состояние отображения / скрытия?

2. @KingKing Я просто ответил так, потому что OP говорил о .css('display', 'table') ..! Я прав .?

3. нет, если это так, я сомневаюсь, что OP уже знает об этом, поэтому этот ответ может быть именно тем, что он знает (последний вариант).

4. @KingKing я тоже так думаю, но то, что именно ищет OP, — это встроенная функция Jquery, которая должна выполнять работу, о которой он просит. Но, по-видимому, он недоступен..

5. На данный момент я не стремился к анимации или любой другой модной вещи в toggle, а просто к более чистому коду. Но вопрос с анимацией, безусловно, стоит рассмотреть. Как я писал в Q (и как пишет @c-link), и как объясняет документ , начальное состояние сохраняется при скрытии, а затем повторно используется при отображении элемента. Отсюда мой вопрос: было бы / должно быть возможно отправить свойство отображения для использования в .toggle() качестве параметра в вызове, почему бы и нет?

Ответ №2:

Вы можете легко отобразить его в виде таблицы. Сначала установите отображение таблицы в таблице стилей css, затем скройте ее с помощью jquery, затем примените переключатель.

css:

 div{
    display: table;
}

jquery:

 $('div').css('display','none');
$('button').on('click',function(){
$('div').toggle();
});

ДЕМОНСТРАЦИЯ

Проверьте это сейчас, и вы должны увидеть, что div отображается как таблица.

1. Ваша демонстрация неправильная @»King King», вы забыли установить ячейку таблицы в ячейках. Посмотрите эту модифицированную демонстрацию

2. @UlfR модифицированная демонстрация также неверна, на самом деле она не была изменена. Так что это лучший ответ, я думаю. Пожалуйста, примите это, чего вы ждете?

3. Да, я вставил неправильную ссылку, извините, но она обновлена и работает сейчас.

Ответ №3:

Я сам нашел решение:

1. При .toggle() вызове для скрытия элемента он обновит свойство отображения встроенного стиля элементов (добавив его, если оно не определено) в none . So:

 <div id="my_test">Foo</div>
<script>jQuery("#my_test").toggle();</script>

приведет к:

 <div id="my_test" style="display: none;">Foo</div>

2. Когда .toggle() вызывается для отображения элемента, он также обновляет свойство отображения встроенного стиля элементов (добавляя его, если оно не определено). Но на этот раз он скопирует свойство отображения из определения с более низким приоритетом, по умолчанию block , если определение с более низким приоритетом не найдено. Итак, если мы добавим встроенную таблицу стилей к исходному примеру, это может выглядеть так:

 <style>                                                                    
  #hidden_table {display: table; }                                         
</style>                                                                   
<div id="hidden_table" style="display: none;">                             
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 1</div>                         
    <div style="display: table-cell;">Cell 2</div>                         
  </div>                                                                   
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 3</div>                         
    <div style="display: table-cell;">Cell 4</div>                         
  </div>                                                                   
</div>
<a onclick='jQuery("#hidden_table").toggle();'>Click Me</a>

И когда теперь нажата кнопка «Щелкнуть меня», свойство встроенного отображения будет скопировано из внутренней таблицы стилей, что приведет к:

 ...
<div id="hidden_table" style="display: table;">
...

И это именно то, о чем я просил!Сделайте это:

Добавить style="display: none;" к элементу.
Установите желаемое свойство отображения во встроенном / файловом css-определении для элемента.