每当我点击“click hier”时,类“cirkel1”的 div 和类“bewegendetekst”的 div 就会出现。但是当我想点击“点击返回”时,它们不会消失。
我尝试使用切换功能,但这只会让事情变得更糟。
所以我的问题是,当我单击“单击返回”时,如何使类为“cirkel1”的 div 和类为“bewegendetekst”的 div 消失
$(document).ready(function() {
$(".blok1").click(function() {
$(".blok2").toggle("slow");
$(".blok3").toggle("slow");
$(".blok4").toggle("slow");
});
$(".blok1").click(function() {
if ($(this).width() != 500)
$(this).animate({
width: 500
}, 1000);
else
$(this).animate({
width: 250
}, 1000);
});
$(".blok1").click(function() {
if ($(this).height() != 500)
$(this).animate({
height: 500
}, 1000);
else
$(this).animate({
height: 250
}, 1000);
});
});
$(document).ready(function() {
$("p").on("click", function() {
var el = $(this);
setTimeout(function() {
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
}, 1000);
});
});
$(document).ready(function() {
$(".cirkel1").click(function() {
$(".bewegendetekst").show("slow");
});
});
$(document).ready(function() {
$(".witte-tekst").click(function() {
$(".cirkel1").show("slow");
});
$(".cirkel1").click(function(e) {
e.stopPropagation();
$(".cirkel1").hide("slow");
});
});
.rij1 {
display: flex;
width: 500px;
}
.rij2 {
display: flex;
width: 500px;
}
.blok1 {
background-color: cadetblue;
height: 250px;
width: 250px;
}
.blok2 {
background-color: palevioletred;
height: 250px;
width: 250px;
}
.blok3 {
background-color: darkseagreen;
height: 250px;
width: 250px;
}
.blok4 {
background-color: coral;
height: 250px;
width: 250px;
}
.witte-tekst {
color: #fff;
}
.cirkel1 {
border-radius: 50%;
background-color: #000;
height: 125px;
width: 125px;
position: absolute;
}
.bewegendetekst {
color: #fff;
height: 125px;
width: 250px;
background-color: #000;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
<div class='blok1'>
<p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
<div class='cirkel1' style="display:none"></div>
<p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
</div>
<div class='blok2'></div>
</div>
<div class='rij2'>
<div class='blok3'></div>
<div class='blok4'></div>
</div>
最佳答案
使用 jQuery toggle()
当您单击单击返回
按钮时显示/隐藏
圆圈的方法:
$(".witte-tekst").click(function() {
$(".cirkel1").toggle("slow");
})
注意:一个现成的函数就足够了。
希望这对您有所帮助。
$(document).ready(function() {
$(".blok1").click(function() {
$(".blok2").toggle("slow");
$(".blok3").toggle("slow");
$(".blok4").toggle("slow");
});
$(".blok1").click(function() {
if ($(this).width() != 500)
$(this).animate({
width: 500
}, 1000);
else
$(this).animate({
width: 250
}, 1000);
});
$(".blok1").click(function() {
if ($(this).height() != 500)
$(this).animate({
height: 500
}, 1000);
else
$(this).animate({
height: 250
}, 1000);
});
$("p").on("click", function() {
var el = $(this);
setTimeout(function() {
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
}, 1000);
});
$(".cirkel1").click(function() {
$(".bewegendetekst").show("slow");
});
$(".witte-tekst").click(function() {
$(".cirkel1").toggle("slow");
});
$(".cirkel1").click(function(e) {
e.stopPropagation();
$(".cirkel1").hide("slow");
});
});
.rij1 {
display: flex;
width: 500px;
}
.rij2 {
display: flex;
width: 500px;
}
.blok1 {
background-color: cadetblue;
height: 250px;
width: 250px;
}
.blok2 {
background-color: palevioletred;
height: 250px;
width: 250px;
}
.blok3 {
background-color: darkseagreen;
height: 250px;
width: 250px;
}
.blok4 {
background-color: coral;
height: 250px;
width: 250px;
}
.witte-tekst {
color: #fff;
}
.cirkel1 {
border-radius: 50%;
background-color: #000;
height: 125px;
width: 125px;
position: absolute;
}
.bewegendetekst {
color: #fff;
height: 125px;
width: 250px;
background-color: #000;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
<div class='blok1'>
<p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
<div class='cirkel1' style="display:none"></div>
<p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
</div>
<div class='blok2'></div>
</div>
<div class='rij2'>
<div class='blok3'></div>
<div class='blok4'></div>
</div>
关于javascript - jQuery 在点击时隐藏多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40607694/