jquery - 两个函数之间的 jQuery toggle() 不起作用

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单击时，两个 divbloc1并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

Answer 2

试试这个，小提琴

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

});

尝试像这样使用

     $('#bloc1,#bloc2').css({"display":"block"});

为 jQuery 1.9编辑

$(document).ready(function(){

    $('#cta-end').click(function(){   
         $('#bloc1').toggle('fast');
        $('#bloc2').toggle('fast');
   });

});

Answer 3

试试看，下面的代码。

$('.target').toggle();

没有参数，.toggle() 方法只是简单地切换元素的可见性

Answer 4

在 jquery 1.7 以上的功能之间切换不起作用，您可以使用 toggleClass() 代替。 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass