Question

我有一个简单的show hide功能，可以在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');
        }
    });
  });
});

Answer 1

修复它，它是z-index！

转换转换不适用于Firefox

1 个答案: