我想创建一些内容,当用户点击一张图片时,它会显示一组信息,当他们再次单击图片时,它会消失,并且如果他们点击不同的图片时一个已经显示,它会隐藏该图像信息并显示最近点击的图片的信息。我对JQuery和JS真的很陌生,所以我有问题在框外思考。我可以很容易地用.toggleClass()完成显示,但我不知道如何去做其余的事情。这就像一个简单的悬停,但点击。也只有前两项工作,因为我试图弄清楚它是如何工作的。Jquery切换并隐藏
非常感谢,非常感谢。 :)
$(function() {
$('.read').click(function() {
$('.showread').toggleClass('pshow');
});
$('.sew').click(function() {
$('.showsew').toggleClass('pshow');
});
});
.aboutmewrapper {
background: #2F3347;
height: 100vh;
position: absolute;
width: 100%;
}
.imagewrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.imagesec {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
flex-direction: column;
}
.imagesec i {
color: #ececec;
font-size: 100px;
}
.showread {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.showsew {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.psections {
position: relative;
bottom: 20%;
font-size: 25px;
}
.showread:before, .showsew:before {
content: '';
width: 5px;
height: 40px;
border-radius: 20px;
background-color: #FE715D;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
}
.pshow {
opacity: 1;
}
.phide {
opacity: 0;
}
.imagesec img {
height: 200px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
>
<div class="aboutmewrapper">
<div class="imagewrap">
<div class="imagesec">
<img class="read" src="https://i.imgur.com/3cgLq19.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img class="sew" src="https://i.imgur.com/jnwU44r.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img src="https://i.imgur.com/MoV3QpE.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img src="https://i.imgur.com/yyC2Hjf.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="psections">
<p class="showread">Reading makes you smarter. That's why I read.</p>
<p class="showsew">Believe it or not I sew.</p>
</div>
</div>
是你目前的意图有这样的分离的图像和信息? – Taplar
@Taplar它目前没有响应,但图像显示在一行上,弹出的文本应该在它们下面,对齐中心,在彼此之上 – RogerFedFan
@Taplar是的,一个例子会很好。谢谢! – RogerFedFan