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

Answer 2

试试这个，FIDDLE

$(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"});

<强> EDITED 对于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

两个函数之间的jQuery toggle（）不起作用

4 个答案: