好的,这是我的代码
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 上的代码
谢谢!
最佳答案
您可以使用以下代码:
$(document).ready(function () {
$('#cta-end').click(function () {
$('#bloc1, #bloc2').toggle();
//or $('#bloc1, #bloc2').toggle(1000); for transition effect
});
});
关于两个函数之间的 jQuery 切换()不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16234396/