click，mouseenter和toggleclass之间的冲突，删除背景颜色onclick

Question

这是我的代码的工作方式：

1. 这就是它原来的样子。

2. 单击第一个缩略图图像（显示在红色框中）后，将激活蓝色背景。

3. 单击第二个缩略图图像（显示在红色框中）时，也会激活蓝色背景。

4. 我的问题在这里。当我单击相同的图像以关闭扩展器时，蓝色背景仍然显示在那里。 我想在扩展器关闭时将其删除。

这是我的代码的一部分，我的代码太长了。我刚刚采用了简化部分。我认为我的jQuery有一些问题，但我不确定如何改变它，希望你们中的一些人可以给我一些建议。谢谢！

$(document).ready(function() {
	$('.thumbnail').mouseenter(function(e) {
		$(this).children('span').children('span').removeClass('title');
		$(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500);
	}).mouseleave(function(e) {
		$(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200);
		$(this).children('span').children('span').addClass('title');  //click and just remove title
	});

	$(".thumbnail").click(function(){ 
		$(".thumbnail").children('span').children('span').removeClass("background-active"); 
		$(this).children('span').children('span').toggleClass('background-active');    	
	});
});

.gallery-item {
  text-align: left;
  font-size: 25px;
  margin: 0 10px;
  padding: 10px 0;
}

.gallery-item .thumbnail img {
  display: block;
  width: 50%;
  height: auto;
}

.gallery-contents { position: relative; }

.gallery-item .title {
	position:absolute; 
	bottom:0px; 
	left:0px;
	width:50%;
	background-color:#5ba4ee;
	color:#fff;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 10px;
}


.dark-background, .background-active {
	background-color: rgba(112, 158, 202, 0.8);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	height: 50%;
	padding-top: 30%;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 50%;
	z-index: 100;
	text-transform: uppercase;
}

.background-active.title {
	background-color: rgba(112, 158, 202, 0.8);
	padding-top: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-item">
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
</div>

Answer 1

试试这个..

$(document).ready(function() {
	$('.thumbnail').mouseenter(function(e) {
		$(this).children('span').children('span').removeClass('title');
		$(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500);
	}).mouseleave(function(e) {
		$(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200);
		$(this).children('span').children('span').addClass('title');  //click and just remove title
	});

	$(".thumbnail").click(function(){ 
	  	$(".thumbnail").not(this).children('span').children('span').removeClass("background-active");  
		$(this).children('span').children('span').toggleClass('background-active'); 	
	});
});

.gallery-item {
  text-align: left;
  font-size: 25px;
  margin: 0 10px;
  padding: 10px 0;
}

.gallery-item .thumbnail img {
  display: block;
  width: 50%;
  height: auto;
}

.gallery-contents { position: relative; }

.gallery-item .title {
	position:absolute; 
	bottom:0px; 
	left:0px;
	width:50%;
	background-color:#5ba4ee;
	color:#fff;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 10px;
}


.dark-background, .background-active {
	background-color: rgba(112, 158, 202, 0.8);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	height: 50%;
	padding-top: 30%;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 50%;
	z-index: 100;
	text-transform: uppercase;
}

.background-active.title {
	background-color: rgba(112, 158, 202, 0.8);
	padding-top: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-item">
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
</div>

只需使用.not(this)将其排除在移除background-active。

之外