Eu sou novo no Js e no jQuery e consegui configuraruma animação de mudança de largura em uma div quando eu pairo sobre a outra. Mas quando eu coloco 3 grupos semelhantes de divs, um foco em um deles aciona a ação em todos os outros. Eu tentei colocar alguns "this" e "next ()", mas ele simplesmente parou de funcionar. Você pode me esclarecer por favor. Obrigado
Aqui está o código.
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");
};
});
Respostas:
7 para resposta № 1Você pode usar $(this).next() e toggleClass() DEMO
$(".mapHideBtn").hover(function(){
$(this).next().toggleClass("shown");
});
Atualização: se você quiser que a barra vermelha permaneça aberta quando passar o mouse sobre ela, poderá usar essa abordagem CSS pura DEMO ou lugar .searchBlock dentro .mapHideBtn DEMO
0 para resposta № 2
Você precisa alterar seus seletores de jQuery para $(this) e $(this).next().
O que você está enfrentando é um tipo de loop que encontra TODOS os seletores marcados e executa as regras neles.
Aqui está um violino fixo para você: https://jsfiddle.net/LmbaL1qo/5/
E aqui está o código:
$(".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 para resposta № 3
A solução é simples:
<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>