[英]jQuery remove class of parent of parent
我正在研究一架垂直小手风琴,但遇到了障碍。
单击div后,该div会打开以填充屏幕...我试图在单击“关闭按钮” div时将其反转,但是它对我不起作用。
这是我的代码... 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");
});
});
这里有什么帮助吗?
尝试以下代码。 实际上,您每次单击“ .shutter”时都会发生这种情况。 因为当您单击关闭按钮时,它也在“ .shutter” div内,因此为什么会折叠然后再次打开。
$(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");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.