Je suis nouveau sur Js et jQuery, et j'ai réussi à mettre en placeune animation de changement de largeur sur un div lorsque je survole un autre. Mais quand je mets 3 groupes de divs similaires, un survol sur l'un déclenche l'action sur tous les autres. J'ai essayé de mettre un peu "this" et "next ()" mais ça a juste cessé de fonctionner complètement. Pouvez-vous m'éclairer s'il vous plaît. Je vous remercie
Voici le code.
https://jsfiddle.net/HiD3f/LmbaL1qo/2/
<html>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
</html>
<style>
.searchBlock {
display : inline-block;
height: 50px;
background : red;
}
.hidden {
width: 0;
transition : width 0.4s ease-in
}
.shown {
width: 300px;
transition : width 0.4s ease-in
}
.mapHideBtn {
display : inline-block;
width: 50px;
height: 50px;
background : green;
}
</style>
<script>
$(".mapHideBtn").hover(function(){
if ($(this).hasClass("collapsed")) {
$(".searchBlock").removeClass("hidden").addClass("shown");
$(".mapHideBtn").removeClass("collapsed").addClass("expanded");
}
else {
$(".searchBlock").removeClass("shown").addClass("hidden");
$(".mapHideBtn").removeClass("expanded").addClass("collapsed");
};
});
Réponses:
7 pour la réponse № 1Vous pouvez utiliser $(this).next() et toggleClass() DEMO
$(".mapHideBtn").hover(function(){
$(this).next().toggleClass("shown");
});
Mise à jour: si vous voulez que la barre rouge reste ouverte lorsque vous la survolez, vous pouvez utiliser cette approche CSS pure DEMO ou lieu .searchBlock à l'intérieur .mapHideBtn DEMO
0 pour la réponse № 2
Vous devez changer vos sélecteurs jQuery en $(this) et $(this).next().
Ce que vous rencontrez est un type de boucle qui trouve TOUS les sélecteurs que vous avez marqués et exécute les règles sur eux.
Voici un violon fixe pour vous: https://jsfiddle.net/LmbaL1qo/5/
Et voici le code:
$(".mapHideBtn").hover(function() {
if ($(this).hasClass("collapsed")) {
$(this).next().removeClass("hidden").addClass("shown");
$(this).removeClass("collapsed").addClass("expanded");
} else {
$(this).next.removeClass("shown").addClass("hidden");
$(this).removeClass("expanded").addClass("collapsed");
};
});
0 pour la réponse № 3
La solution est simple:
<script>
$(".mapHideBtn").hover(function(){
if ($(this).hasClass("collapsed")) {
$(this).next().removeClass("hidden").addClass("shown");
$(".mapHideBtn").removeClass("collapsed").addClass("expanded");
}
else {
$(".searchBlock").removeClass("shown").addClass("hidden");
$(".mapHideBtn").removeClass("expanded").addClass("collapsed");
}
});
</script>