Question

我有一个带有id＆＃34; m＆＃34;我希望切换其可见性，但仅限于bootstrap xs，对于其他尺寸，我希望它始终可见。

经过多次摆弄后，我在点击另一个id为＃34; mf＆＃34;的div时，从div中添加和删除hidden-xs类，这有效但我无论如何都无法找到过渡使其看起来更顺畅。我尝试过添加webkit和moz过渡，我尝试过fadeIn和fadeOut，但没有任何过渡，继承我的代码，有什么建议吗？

$('#mf').click(function(event){
   event.preventDefault();
   if ($('#m').hasClass('hidden-xs')){
   $('#m').removeClass('hidden-xs');
   }else{
   $('#m').addClass('hidden-xs');
   }
});

Answer 1

Jquery还有一个method .toggleClass()，如果该元素还没有它，它将添加该类，如果该元素具有它，则将删除它。您可以尝试使用它可能会有所帮助。它还可以为您节省几行，您的功能可能就是

$('#mf').click(function(event){
   event.preventDefault();
   $('#m').toggleClass('hidden-xs');
});

编辑：更新：CSS转换无法与hidden-xs一起使用，因为它添加的css为display: none且display不可动画，您必须使用自己的内容编写媒体查询使用opacity或visibility来隐藏元素。

CSS的类似内容：

#m {
       -o-transition: 1s ease;
       -ms-transition: 1s ease;
       -moz-transition: 1s ease;
       -webkit-transition: 1s ease;
       transition: 1s ease;
   }
@media (max-width: 767px) {
    .custom-hidden-xs {
        visibility: hidden;
    }
}

这是你的js：

$('#mf').click(function(event){
   event.preventDefault();
   $('#m').toggleClass('custom-hidden-xs');
});

jQuery addClass hidden-xs with transition

1 个答案: