Question

我正在尝试通过单击另一个元素切换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>

Answer 1

您可以将display设置为none：

$('.fa.fa-music').click(function () {
    if ($('.musicplay').attr('style')) {
        $('.musicplay').removeAttr('style');
    } else {
        $('.musicplay').attr({
            style: "display:none"                                                                 
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<i class="fa fa-music">asdas</i>
<div class="musicplay" style="display: none;">blablabla</div>

您可以使用visibility：

$('.fa.fa-music').click(function () {
    if ($('.musicplay').attr('style')) {
        $('.musicplay').removeAttr('style');
    } else {
        $('.musicplay').attr({
            style: "visibility:hidden"                                                                 
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-music">asdas</i>
<div class="musicplay" style="visibility: hidden;">blablabla</div>

在您评论希望opacity和visibility之后，您可以使用以下内容：

 $('.fa.fa-music').click(function () {
     if ($('.musicplay').css("visibility") != "hidden") {
         $('.musicplay').attr({
             style: "visibility: hidden; opacity: 0;"
         });
     } else {
         $('.musicplay').attr({
             style: "visibility: visible; opacity: 1;"
         });
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-music">asd</i>

<div class="musicplay" style="visibility:hidden;opacity:0;">blablabla</div>

Answer 2

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

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

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

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

现在使用addClass()和removeClass()：

$('.fa.fa-music').click(function() {
   if ($('.musicplay').hasClass("hidden"))
   {
    $('.musicplay').removeClass("hidden")
    $('.musicplay').addClass("visible")
   }
   else
   {
    $('.musicplay').removeClass("visible")
    $('.musicplay').addClass("hidden")
   }
});

WORKING EXAMPLE

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

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

和

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

并在jquery中使用toggleClass()：

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

});

Answer 3

按类进行：

CSS：

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

JS：

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

删除所有style =“”属性并添加或删除隐藏在元素中的类取决于您是否要在开头显示或不显示此元素。

在jquery中点击div的样式标记

3 个答案:

WORKING EXAMPLE