转换翻译在 Firefox 上不起作用答案

【问题标题】：Transform translate not working on Firefox转换翻译在 Firefox 上不起作用
【发布时间】：2018-09-20 05:07:08
【问题描述】：

我有一个简单的显示隐藏功能，它在 Chrome 和 Safari 中运行良好，但隐藏的内容在 Firefox 上不显示。我已经四处寻找，但我尝试的没有任何效果。内容在视图源中，但似乎没有向上滑动。这是我的代码

<div class='faq__item'>
<div class='faq__content'>
    <div class="faq__wrapper">
        <div class="faq__slide">
            <h3 class="faq__title">{{ heading }}</h3>
            <div class="faq__icon glyphicon glyphicon-menu-down" target="{{index}}"></div>
        </div>
        <div class="faq__slide__content" id="slider{{index}}">
            <p>{{ body }}</p>
        </div>
    </div>
</div>

CSS：

.faq__slide__content {
 height: 0;
 overflow: hidden;
 z-index: -1;
 opacity: 0;
 transform: translateY(40px);
 transition: all 0.5s ease;

 p {
   margin: 0;
 }
}

.show-content {
 .faq__slide__content {
  margin-top: 16px;
  height: auto;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
}

}

jQuery(document).ready(function () {
jQuery(function($){
    $('.faq__wrapper').click(function(){
        if($(this).hasClass('show-content'))
        {
            $('.show-content').removeClass('show-content');
            $(this).removeClass('show-content');
            $(this).find('.faq__icon').removeClass('glyphicon-menu-up');
            $(this).find('.faq__icon').addClass('glyphicon-menu-down');


        }
        else
        {
            $('.show-content').removeClass('show-content');
            $(this).addClass('show-content');

           $(this).find('.faq__icon').removeClass('glyphicon-menu-down');
           $(this).find('.faq__icon').addClass('glyphicon-menu-up');
        }
    });
  });
});

【问题讨论】：

标签： javascript jquery firefox transform translate

【解决方案1】：

刚刚修好了，就是z-index！

【讨论】：