JQuery 3.1.1和CSS flexbox

当使用JQuery的淡入淡出功能时，如果一个元素以'display：none'开头，然后淡出，JQuery将在淡入项目时注入'display：block'。JQuery 3.1.1和CSS flexbox

在flexbox布局中，这会导致元素换行到下一行。

当我禁用父母上的display:flex时，其行为与预期相同。

有没有办法在最初需要隐藏的特定元素上禁用display:flex？

我可以只使用解决此问题：

$('el').fadeIn().css('display','inline-block');

但这种方法是不可取的在这种情况下。有什么建议么？

这里是一个演示

上#flex

$('#clickme').click(function() { 
 
    $('#test').fadeToggle(); 
 
    return false; 
 
});

#flex { 
 
    display: flex; /* BREAKS JQUERY FADE, JQUERY INJECTS DISPLAY:BLOCK; */ 
 
    flex-direction: column; 
 
} 
 
#main { 
 
    flex: 1; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<body id="flex"> 
 
    <div id="main"> 
 
    <span class="tools"> 
 
     <a class="a" href="" id="clickme">Click Me</a> 
 
     <span id="test" class="hidden">I should be inline!</span> 
 
    </span> 
 
    </div> 
 
</body>

如果禁用display:flex它按预期工作/期望。

来源

2016-10-04 Bill Kervaski

这里的演示可能是有用的 –

https：//开头的jsfiddle。 net/60xush0w/ –

我不认为这是可能的nati真正使用Jquery的*“淡入淡出”*。没有“显示器：flex-item”这是**应该被应用的东西。不幸的是，你可能不得不在这里编写你自己的函数。 –

您需要申请Flexbox，就到.tools跨度

\t \t \t $(document).ready(function() { 
 

 
\t \t \t $('#clickme').click(function() { 
 
\t \t \t  $('#test').fadeToggle(); 
 
\t \t \t  return false; 
 
\t \t \t }) 
 

 
\t \t \t });

#flex { 
 
    display: flex; 
 
    /* BREAKS JQUERY FADE, JQUERY INJECTS DISPLAY:BLOCK; */ 
 
    //flex-direction: column; 
 

 
} 
 
#main { 
 
    flex: 1; 
 
} 
 
.tools { 
 
    display: flex; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body id="flex"> 
 

 
    <div id="main"> 
 

 
    <span class="tools"> 
 
    <a class="a" href="#01" id="clickme">Click Me</a> 
 
    <span id="test" class="hidden">I should be inline!</span> 
 
    </span> 
 

 
    </div>

来源

2016-10-04 15:50:05

适用于这个例子，但是这只是包裹整个跨度，它应该保持内联... –

我不确定你的意思，你的意思是你不希望隐藏的跨度打破*永远*？ 'white-space：nowrap'会做到这一点。 –

不是在这种情况下，而不是默认情况下..一个跨度应该始终是一个内联元素..自定义函数工作，有点hackish，但它的工作原理，很容易..由于某种原因，我讨厌通过javascript/jquery添加CSS。。可能只是我 –

这是因为，当你告诉一个元素，jQuery的必须对其display猜测。这是因为CSS设计不佳。应该从未存在过dislay: none。

jQuery不会这在其getDefaultDisplay功能：

function getDefaultDisplay(elem) { 
    var temp, 
     doc = elem.ownerDocument, 
     nodeName = elem.nodeName, 
     display = defaultDisplayMap[ nodeName ]; 

    if (display) { 
     return display; 
    } 

    temp = doc.body.appendChild(doc.createElement(nodeName)); 
    display = jQuery.css(temp, "display"); 

    temp.parentNode.removeChild(temp); 

    if (display === "none") { 
     display = "block"; 
    } 
    defaultDisplayMap[ nodeName ] = display; 

    return display; 
}

基本上，它创建的相同类型的新元件并将其插入到体内。它的计算结果display被认为是正在显示的元素的默认显示。这种方法是如此容易理解，老版本的jQuery比IMO更好。

无论如何，他的问题是，你的风格body作为一个弹性容器。挠性容器的小孩被阻塞。因此，该虚拟元素的计算display将为"block"，这就是您的元素将收到的内容，即使您的元素不参与弹性布局。

所以最好避免身体上的display: flex。您可以添加一个包装。

$('#clickme').click(function() { 
 
    $('#test').fadeToggle(); 
 
    return false; 
 
});

#flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#main { 
 
    flex: 1; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div id="flex"> 
 
    <div id="main"> 
 
    <span class="tools"> 
 
     <a class="a" href="" id="clickme">Click Me</a> 
 
     <span id="test" class="hidden">I should be inline!</span> 
 
    </span> 
 
    </div> 
 
</div>

来源

2016-10-04 16:04:31 Oriol

最终，这样的事情是什么在起作用：

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

用法：

$('el').fadeToggle().inline();

来源

2016-10-04 17:49:19

JQuery 3.1.1和CSS flexbox

回答

相关问题