jQuery Entfernen Klasse des Elternteils

Question

Ich arbeite an einem kleinen vertikalen Akkordeon und ich lief in einen Haken.

Nach dem Klicken auf ein Div öffnet sich das div, um den Bildschirm zu füllen ... Ich versuche, dies nach dem Klicken auf die Schaltfläche "close button" umzukehren, aber es funktioniert nicht für mich.

Hier ist mein Code ... https://codepen.io/Finches/pen/mpyKrL

$(document).ready(function() { 
    $('.shutter').click(function() { 
    if (!$(this).hasClass('shutterExpanded')) { 
     $(this).addClass('shutterExpanded'); 
     $('.wrapper').addClass('shutterOpen'); 
     $(this).children(".shutterContent").fadeIn(400).addClass("show-content"); 
     $(this).children(".shutterBG").addClass("bg-opacity"); 
    } 
    }); 
    $('.close-btn').click(function() { 
    $(this).parent().parent().removeClass("shutterExpanded"); 
    $('.wrapper').removeClass('shutterOpen'); 
    $(this).parent(".shutterContent").fadeOut(250).removeClass("show-content"); 
    $(this).parent().siblings(".shutterBG").removeClass("bg-opacity"); 
    }); 
}); 

Jede Hilfe hier?

Answer 1

Versuchen Sie den folgenden Code. Tatsächlich passiert es, wenn Sie jedes Mal auf ".shutter" klicken. Denn wenn man auf Schließen klickt, ist es auch innerhalb von ".shutter" div, weshalb es kollabiert und dann wieder öffnet.

$(document).ready(function() { 
    $('.shutter').click(function() { 
    if (!$(this).hasClass('shutterExpanded')) { 
     $(this).addClass('shutterExpanded'); 
     $('.wrapper').addClass('shutterOpen'); 
     $(this).children(".shutterContent").fadeIn(400).addClass("show-content"); 
     $(this).children(".shutterBG").addClass("bg-opacity"); 
    } 
    }); 
    $('.close-btn').click(function(e) { 
    e.stopPropagation(); // Key line to work perfectly 
    if ($(this).parent().parent().hasClass("shutterExpanded")) { 
     $(this).parent().parent().removeClass("shutterExpanded"); 
    }; 
    $('.wrapper').removeClass('shutterOpen'); 
    $(this).parent(".shutterContent").fadeOut(250).removeClass("show-content"); 
    $(this).parent().siblings(".shutterBG").removeClass("bg-opacity"); 
    }); 
});