Fatal编程技术网
  • jquery/
  • Jquery show（）一个弹性体

Jquery show（）一个弹性体

jquery css

Jquery show（）一个弹性体,jquery,css,flexbox,Jquery,Css,Flexbox,我有一个带有flexbox的元素 <ul id="myFlexbox"> div#myFlexbox{ display:flex; } 现在，元素显示为block而不是flex <ul id="myFlexbox" style="display: block;"> 如何使用FlexBox使用.hide和.show？JQuery.show（）不知道您的显示：flex（不是flexbox）。而是尝试添加和删除隐藏类 CSS: JS: 否则，您必须在CSS完

我有一个带有flexbox的元素

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}
现在，元素显示为block而不是flex

<ul id="myFlexbox" style="display: block;">
如何使用FlexBox使用.hide和.show？

JQuery
.show（）
不知道您的
显示：flex（不是flexbox）。而是尝试添加和删除隐藏类

CSS:

JS:



否则，您必须在CSS完全加载且DOM准备就绪后执行JS，我猜-例如：


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






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

show（）
将
display:block
添加为
div
的默认值。您可以使用jQuery
css（）
将
显示更改为
flex
：


您应该用元素包装
display:flex
内容


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





    

    

    将javascript show/hide绑定到“#flexWrapper”
    ，因为其他答案没有考虑您可能使用
    duration
    参数的可能性
    
简短回答：用于隐藏值，这不应该发生
    
一点解释：
    
匹配的元素将立即隐藏，没有动画。这大致相当于调用.css（“display”、“none”），，只是display属性的值保存在jQuery的数据缓存中，以便以后可以将display恢复为其初始值。如果一个元素的显示值为flex，并且隐藏后显示，它将再次显示为flex
    
从文档中，将“inline”更改为“flex”，以适应contenxt
    

    所以jQuery知道你在隐藏什么！如果您使用该选项将其隐藏，并且它知道如何使用正确的显示值再次显示。
    则
    类
    解决方案有效，是的。
我想出了一个不同的方法：
    
Javascript函数
要使用它：
请注意，调用函数时，ID不需要#
    
例子：

    只要使用
    

    .class{display: none}

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

    

    当jquery add styl attribute css将被应用时，它在Chrome和Mozilla上可以完美地工作
    这个想法是创建一个自定义函数
    showFlex（）
    ，类似于jquery
    show（）属性
    
jQuery解决方案
    

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

    

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

    

    $（'#myFlexbox'）.showFlex（）
    
JavaScript解决方案
    

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

    

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

    

    document.getElementById（'myFlexbox'）.showFlex（）
    

    希望这能有所帮助。
    我知道这有点太晚了（3年），但这是我设法做到的
    
我在css中为我的div创建了一个规则，例如#myDiv，如下所示
    

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

    

    它利用了jQuery对DOM的作用，它应用了“display:block”。我使用内联flex是因为我需要它来完成我的工作，但它可以是任何你想要的。通过这种方式，规则可以更快地应用，而不会出现任何闪烁。
    这很好，但是如何处理可能出现的“闪烁”。因为页面加载时元素是可见的，所以在“隐藏”之前它会在屏幕上停留一秒钟。在过去，这就是为什么我总是将CSS默认为
    display:none
    ，然后使用
    .show（）
    方法来查看它。嗯，首先想到的是在页面加载之前使用一个带有display:none值的包装器……这会在JS和CSS之间创建一个硬编码链接。现在，如果您决定更改css以使#myFlexbox不再是flex，那么您的JS是不正确的。我更喜欢mxlse的答案。这不支持持续时间参数。看看Nikolay（）的优秀解决方案。您仍然可以使用show（）和hide（），并且不必更改javascript代码。jQuery解决方案应该是
    $.fn.showFlex=function（）{this.css（{'display'：'flex'}）；}
    这不支持持续时间参数。虽然此代码可以解决OP的问题，最好包括关于代码如何解决OP问题的解释。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到自己的代码中。因此，它不是一种编码服务，而是一种知识资源。此外，高质量、完整的答案更有可能被提升。这些特性，以及所有帖子都是独立的要求，是SO作为一个平台的一些优势，使其区别于论坛。您可以编辑以添加其他信息和/或使用源文档补充说明。我认为这是最好的解决方案，因为它允许您继续使用show（）。简单的CSS更改，不需要一堆js更改来检查当前状态。真是个好主意！这真是天才！

    $('#myFlexbox').show({
    start: function() {
        $(this).css('display', 'flex');
    }
});

    

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

    

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

    

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

    

    $('#myFlexbox').show({
    start: function() {
        $(this).css('display', 'flex');
    }
});