新手上路，请多包涵

我有一个带有 flexbox 的元素

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

在隐藏它并显示它之后，它变得一团糟。

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

现在该元素显示的是块而不是 flex。

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

如何将 .hide 和 .show 与 flexbox 一起使用？

原文由 Running Buffalo 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 759

2 个回答

得票最新

✓ 已被采纳

show() 添加 display:block 作为 div 的默认值。您可以使用 jQuery css() --- 将 flex 更改为 display ：

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

原文由 guizo 发布，翻译遵循 CC BY-SA 4.0 许可协议

JQuery .show() 不知道你的 display: flex; （不是flexbox）。而是尝试添加和删除隐藏类。

CSS：

 #myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

记者：

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

否则你必须在 CSS 完全加载并且 DOM 准备好后执行你的 JS 我猜 - 即像：

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

更新了小提琴并将 Javascript 执行设置为 domready - 它正在工作：

原文由 mxlse 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

推荐问题

子站问答

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

jQuery .show() 一个弹性盒子