在jquery中单击时切换div的样式标记

我试图通过单击另一个元素来切换div元素的样式标记，但是jquery代码似乎工作不好。。它显示了div，但没有隐藏它

<script>
 $(function() {
  $('.fa.fa-music').click(function() {
   if ($('.musicplay').attr('style'))
    $('.musicplay').removeAttr('style');
   else $('.musicplay').attr({
    style: "visibility: visible; opacity: 1;"
});
});
});
</script>

这是html部分

<i class="fa fa-music"></i>
<div class="musicplay" style="visibility:hidden;opacity:0;">blablabla</div>

您可以将“显示”改为“无”：

$'.fa.fa音乐'。单击功能{ 如果$'.musicplay'.attr'style'{ $'.musicplay'.removeAttr'style'； }否则{ $'.musicplay'.attr{ 样式：显示：无 }; } }; 阿斯达斯

---

bla创建两个css类并使用它们：

.hidden
{
visibility:hidden;
opacity:0;
}

.visible
{
visibility:visible;
opacity:1;
}

<div class="musicplay hidden" style="">blablabla</div>

或者，您也可以只使用一个类：

.hidden
    {
    visibility:hidden;
    opacity:0;
    }

以及：

按课程进行：

CSS:

JS:

---

删除所有style=属性并添加或删除隐藏在元素中的类取决于您是否希望在开始时显示此元素。

是否只想切换div的可见性？如果是这样，您可以执行以下操作：$'.fa.fa music'。单击函数{e.preventDefault；$'.musicplay.fadeToggle；}一般来说，切换一个类和为classI设置css规则要简单得多，这样可以避免使用style属性，而是切换一个类。是的，也可以使用一个类来切换，但是使用两个类可以清楚地了解OPIt在JSFIDLE上的工作情况。。但它在tumblr上不起作用。。有什么建议吗？我可能犯了一个错误忽略了这个。musicplay是一个iframe。。但即使使用iframe，它也可以在JSFIDLE上工作。。！！顺便说一句，我必须使用可见性和不透明度，因为元素必须工作，即使它不可见！请检查最后一段。

.hidden
    {
    visibility:hidden;
    opacity:0;
    }

<div class="musicplay>blablabla</div> 

$('.fa.fa-music').click(function() {
   $('.musicplay').toggleClass("visible")

});

.hidden {
   visibility: hidden;
   opacity: 0;
}

$('.musicplay').click(function() {
   if($(this).hasClass('hidden') {
      $(this).removeClass('hidden');
   } else {
      $(this).addClass('hidden');
   }
});