clic, mouseenter et toggleclass, enlever la couleur d'arrière-plan onclick

Question

Voici comment mon code fonctionne:

1. Voici comment il ressemble à l'origine. Après avoir cliqué sur la première image en miniature (en rouge), l'arrière-plan en couleur bleue est activé. Lorsque vous cliquez sur la 2ème image miniature (en rouge), l'arrière-plan en couleur bleue est également activé.

2. Mon problème est ici. Lorsque je clique sur la même image pour fermer l'expandeur, l'arrière-plan en couleur bleue est toujours affiché. Je veux l'enlever quand l'expander est fermé.

Cela fait partie de mon code, mon code est trop long. Je viens de prendre la partie simplifiée. Je pense que mon jQuery a quelques problèmes, mais je ne sais pas comment le changer, espérant que certains d'entre vous pourraient me donner quelques conseils. Merci!

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

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

.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 { 
 
\t position:absolute; 
 
\t bottom:0px; 
 
\t left:0px; 
 
\t width:50%; 
 
\t background-color:#5ba4ee; 
 
\t color:#fff; 
 
\t font-size: 16px; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t padding: 5px 10px; 
 
} 
 

 

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

 
.background-active.title { 
 
\t background-color: rgba(112, 158, 202, 0.8); 
 
\t 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

Essayez cette ..

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

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

.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 { 
 
\t position:absolute; 
 
\t bottom:0px; 
 
\t left:0px; 
 
\t width:50%; 
 
\t background-color:#5ba4ee; 
 
\t color:#fff; 
 
\t font-size: 16px; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t padding: 5px 10px; 
 
} 
 

 

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

 
.background-active.title { 
 
\t background-color: rgba(112, 158, 202, 0.8); 
 
\t 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>

Il suffit d'utiliser .not(this) pour l'exclure de la suppression du background-active.