jQuery刪除父級的父級類

Question

我正在研究一架垂直小手風琴，但遇到了障礙。

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

這里有什么幫助嗎？

Answer 1

嘗試以下代碼。 實際上，您每次單擊“ .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");
  });
});