Question

我有一个图片库，我希望能够单击该图片右下角的小“加号”以在该图片上显示文本。我也希望当我单击另一张图像时该文本消失。如果单击“ +”，则根据需要显示文本。如果我单击另一张图像，它会消失，所以可以。但是，我的问题是我无法显示该文本，然后单击同一图像的“ +”将其隐藏。您有解决此错误的想法吗？预先感谢您的光临

$(".more").click(function(){			  
				$('.fermer').not(this).removeClass('fermer');
				$('.apparait').not(this).removeClass('apparait');
				$(this).toggleClass ('fermer');
				$(this).next(".infos").toggleClass('apparait');
			});

.more {position: absolute; font-size:35px; color:white;	bottom: 5px;	right: 40px;	z-index: 10;cursor: pointer;}
.more.fermer {transform: rotate(+45deg); color:black}
.infos {opacity:0;width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0; background-color: rgba(255,255,255,0.95);-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; pointer-events:none; padding: 20px; z-index: 9;}
.infos.apparait{opacity:1!important;transition: all .5s; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">  
    <div class="col-sm-4 ">
          <img src="http://placerabbit.com/200/200/" width="200" height="200" alt="" class="open"/>
		  <div class="more">+</div>
		  <div class="infos">
			<h3>Title</h3>
			<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
      </div>
    </div>
    
     <div class="col-sm-4 ">
          <img src="http://placerabbit.com/200/200/" width="200" height="200" alt="" class="open"/>
		  <div class="more">+</div>
		  <div class="infos">
			<h3>Title</h3>
			<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
      </div>
    </div>
    
        <div class="col-sm-4 ">
          <img src="http://placerabbit.com/200/200/" width="200" height="200" alt="" class="open"/>
		  <div class="more">+</div>
		  <div class="infos">
			<h3>Title</h3>
			<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
      </div>
    </div>
    
    </div>
     </div>

Answer 1

基本上，您希望more按钮具有切换的fermer类以及下一个元素，因此我认为单独执行此操作应该可以：

$('.more').click(function(){
    //To clean the classes
    $('.more').not(this).removeClass('fermer').next().removeClass('apparait');
    $(this).toggleClass('fermer').next().toggleClass('apparait');
});

正在使用您的代码，否则更好的方法可能是：

{{1}}

Rabbit ToggleClass无法正常运行

1 个答案: