两个函数之间的 jQuery 切换()不起作用

Question

好的，这是我的代码

HTML:

<div id="cta-end"><h1>Modification</h1></div>
<div id="bloc1"></div>
<div id="bloc2"></div>

CSS:

#cta-end
{
    width:100%;
    background-color:red;
    text-align:center;
}

#cta-end:hover
{
    cursor:pointer;
}

#bloc1, #bloc2
{
    width: 100%;
    height: 50px;
    margin: 5px 0;
    display:none;
}

#bloc1{
    background-color:blue;
}
#bloc2{
    background-color:grey;
}

和 jQuery :

$(document).ready(function(){


    $('#cta-end').click(function(){   
          $('#cta-end').toggle(function () {
               $('#bloc1').css({"display":"block"});
               $('#bloc2').css({"display":"block"});
            },
               function () {
                  $('#bloc1').css({"display":"none"});
                  $('#bloc2').css({"display":"none"});
               }
               );
         });

   });

我想做的是，当点击cta-end时，两个div bloc1和bloc2显示，当我再次点击 cta-end 时，它没有显示任何内容。我的代码根本不起作用。我想我没有使用应该使用的 toggle() 函数。我只想在每次单击 cta-end 时切换这两个功能..

这是 jsfiddle 上的代码

谢谢!

Answer 1

您可以使用以下代码:

$(document).ready(function () {
    $('#cta-end').click(function () {
        $('#bloc1, #bloc2').toggle();
        //or $('#bloc1, #bloc2').toggle(1000); for transition effect
    });
});

JSFIDDLE1 或 JSFIDDLE2