click、mouseenter和toggleclass冲突，去除onclick背景色

Question

我的代码是这样工作的：

这是原来的样子。
点击第一张缩略图（红框内）后，蓝色背景被激活。
当点击第二张缩略图（红框显示）时，蓝色背景也会被激活。
我的问题就在这里。当我单击同一图像以关闭扩展器时，蓝色背景仍显示在那里。 我想在扩展器关闭时将其删除。

这是我的部分代码，我的代码太长了。我只拿了简化的部分。我认为我的 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 之外。

click、mouseenter和toggleclass冲突，去除onclick背景色

Conflict between click, mouseenter and toggleclass, remove background colour onclick

html

jquery

mouseenter

mouseleave