Pomoc pri programovaní, odpovede na otázky / Javascript / jQuery hover animácia iba na jednom prvku z podobných ostatných - javascript, jquery, html, css

jQuery sa pohybuje animáciou len na jednom prvku z podobných iných - javascript, jquery, html, css

Som nový v Js a jQuery a podarilo sa mi nastaviťanimácia zmeny šírky na div, keď ukážem na inú. Ale keď vložím 3 podobné skupiny divov, prejdením kurzora myši na jednu spustím akciu na všetkých ostatných. Snažil som sa dať nejaké „toto“ a „ďalšie ()“, ale jednoducho to úplne prestalo fungovať. Môžete ma osvietiť, prosím. Ďakujem

Tu je kód.

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");
};
});

odpovede:

7 pre odpoveď č. 1

Môžeš použiť $(this).next() a toggleClass() DEMO

$(".mapHideBtn").hover(function(){
$(this).next().toggleClass("shown");
});

Aktualizácia: Ak chcete, aby červená lišta zostala otvorená, keď na ňu umiestnite kurzor myši, môžete použiť tento čistý prístup pomocou CSS DEMO alebo miesto .searchBlock vnútri .mapHideBtn DEMO

0 pre odpoveď č. 2

Musíte zmeniť selektory jQuery na $(this) a $(this).next().

To, čo zažívate, je typ slučky, ktorý nájde VŠETKY označené selektory a spustí na nich pravidlá.

Tu sú pre vás pevné husle: https://jsfiddle.net/LmbaL1qo/5/

A tu je kód:

$(".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 pre odpoveď č. 3

Riešenie je jednoduché:

<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>