JQuery.show() гибкая коробка

У меня есть элемент с flexbox

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

после того, как спрятать это и показать это, это запутано.

$('#myFlexbox').show();

теперь элемент отображает блок вместо flex.

<ul id="myFlexbox" style="display: block;">

Как я могу использовать .hide и .show с flexbox?

Ответы

Ответ 1

Функция show() добавляет display:block по умолчанию для div. Вы можете изменить display на flex с помощью jQuery css():

$('#myFlexbox').css('display', 'flex');

Ответ 2

JQuery .show() не знает о вашем display: flex; (не flexbox). Вместо этого попробуйте добавить и удалить скрытый класс.

CSS:

#myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

JS:

$('#myFlexbox').addClass('hide');
$('#myFlexbox').removeClass('hide');

https://jsfiddle.net/p2msLqtt/

В противном случае вы должны выполнить свой JS после того, как CSS полностью загружен и DOM готов, я думаю, - например, как:

<html>
  <head>
    <!-- CSS -->
  </head>
  <body>
    <!-- BODY PART -->
    <!-- SCRIPT TO HIDE AND SHOW -->
  </body>
</html>

Обновил скрипку и установил исполнение Javascript на domready - это работает:

https://jsfiddle.net/p2msLqtt/1/

Ответ 3

Поскольку в других ответах не учитывалась возможность использования аргумента duration...

Короткий ответ: Используйте . Hide для скрытия значения, и этого не должно быть.

Небольшое объяснение:

Соответствующие элементы будут немедленно скрыты без анимации. Это примерно эквивалентно вызову .css( "display", "none" ), , за исключением того, что значение свойства отображения сохраняется в кеше данных jQuery, чтобы впоследствии изображение можно было восстановить до его начального значения, Если элемент имеет отображаемое значение flex и скрыт, а затем отображается, он снова будет отображаться как flex.

_{Из документации, Изменен 'inline' до 'flex', чтобы соответствовать contenxt!}

Итак, jQuery знает, что скрываешься! Если вы скрыли его, используя . Hide, который есть, И он знает, как показать его снова с правильным отображаемым значением.

Ответ 4

просто используйте

.class{display: none}

.class[style*='display: block']{
    display: flex !important;
}

когда будет добавлен jquery add styl attribit css, отлично работает на Chrome и Mozilla

Ответ 5

Вы должны обернуть содержимое display: flex элементом.

<div id="flexWrapper">
    <ul id="myFlexbox"></ul>
</div>

свяжите ваш javascript show/hide с '#flexWrapper'

Ответ 6

Решение class работает, да. Вот другой подход, который я придумал:

Функция Javascript

function showFlex(element) {

    var flexContainer = document.getElementById(element);

    flexContainer.setAttribute("style", "display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;");
}

Чтобы использовать его:

showFlex( "yourIDhere" );

Обратите внимание, что при вызове функции идентификатор не требуется #.

Пример:

https://codepen.io/florantara/pen/aLeyYb/

Ответ 7

Я знаю, что уже слишком поздно (3 года), но мне удалось это сделать.

Я создал правило в css для моего div, например #myDiv, которое выглядит следующим образом

#myDiv[style*='block'] {
    display: inline-flex !important;
}

Он использует преимущества того, что jQuery делает с DOM, он применяет 'display: block'. Я использовал inline-flex, потому что мне это было нужно для того, что я делаю, но это может быть что угодно. Таким образом, правило применяется быстрее, без мерцания.

Ответ 8

Идея состоит в том, чтобы создать пользовательскую функцию showFlex() похожую на jQuery show() и вызвать ее с элементом, который должен иметь display:flex; имущество.

Решение jQuery

$.fn.showFlex = function() {
  this.css('display','flex');
}

$('#myFlexbox').showFlex();

Решение JavaScript

Object.prototype.showFlex = function() {
    this.style.display = 'flex';
}

document.getElementById('myFlexbox').showFlex();

Надеюсь это поможет.

Ответ 9

Решение JQuery должно быть

$.fn.showFlex = function(){
    this.css({'display':'flex'});
}