Question

我正在尝试使用jQuery切换div，但我的div是flex容器。

是否存在一个等效于.toggle()的jQuery函数，它将在display:none;和display:flex;之间切换，而不是在display:none和display:block;之间切换标准？ >

Answer 1

处理此问题的最佳方法是使用.toggleClass()并使用hidden类（如果您使用引导程序或只是创建一个新类）。

$(function () {
  setInterval(function () {
    $(".flexbox").toggleClass("hidden");
  }, 2000);
});

.flexbox {
  display: flex;
}
.hidden {
  display: none;
}

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

这样，display和其他属性将始终保持不变，并且由jQuery（无论如何关心它）生成的内联CSS的混乱程度也将减少。

Answer 2

来自Jquery API-

根据需要保存和恢复显示属性。如果一个元素具有显示值inline，然后被隐藏并显示，它将一次再次内联显示。

“ flex”与内联相同。

所以如果元素css是

display: flex;

切换后，可见时将保留为弹性框。

如果您需要在页面加载时隐藏该元素，则可能需要使用其他解决方案，例如当前的accepted answer above，否则一种解决方法是在页面加载时触发切换以使用jQuery隐藏该元素（但这可能不是我认为的最佳做法）

Answer 3

您可以在flex div之前添加普通div（块）并进行切换。这将满足您的需要。

尝试示例！谢谢：）

 function toggleAreaData(){
    jQuery( "#toggler" ).toggle( "#toggler" );
  }

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Toggle a flex with toggle()!
<br>
<br>
<!-- toggle container block -->
<div id="toggler"> 
  <div style="display:flex;">
     MY FLEX TOGGLE DATA<br>
     MY FLEX TOGGLE DATA
  </div>
</div>

<br>
<!-- toggle button -->
<button onclick="toggleAreaData()">PRESS TO TOGGLE</button>

<br>
<br>
So just use a div block inside a div flex :)
</html>

使用jQuery切换flex div

3 个答案: