Rabbit不能正常工作

Question

我有一个图片库，我希望能够点击图像右下角的小“加号”来显示图像上的文本。我还希望当我单击另一个图像时，文本会消失。如果我点击"+"，文本就会出现。如果我点击另一张图片，它就会消失，所以没问题。然而，我的问题是，我不能显示文本，然后通过单击同一图像的"+“来隐藏它。你有什么办法来解决这个bug吗？提前感谢您的关灯

​

$(".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类被切换，还有next元素，所以我认为单独做这件事应该是可以的：

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

    $(this).toggleClass('fermer');
    $(this).next(".infos").toggleClass('apparait');
});

那就是使用你的代码，否则更好的方法可能是这样的：

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