Question

我正在制作一架小型垂直手风琴，但我遇到了障碍。

点击一个div后，该div会打开以填满屏幕...我点击了＆＃34;关闭按钮＆＃34;我试图改变它。 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

尝试以下代码。实际上，每次点击＆＃34; .shutter＆＃34;都会发生这种情况。因为当你点击关闭按钮时，它也在＆＃34; .shutter＆＃34; 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");
  });
});

jQuery删除父类的父类

1 个答案: