是否有办法使div展开覆盖所有可用空间，隐藏其扩展到的所有内容？

Question

我有一个父div，包含4个相等的div(每个25%)，水平并排，包含一个图像。我希望div在单击时展开，这样div就可以动画覆盖整个父div (100%宽度)。然后一些文字在图像上显示出来。

我试图通过css中的flex来实现这一点，但是即使单击的div展开，它也没有覆盖完整的父div。其余3div收缩，但不完全消失。

我还尝试通过Javascript实现这一点，方法是将属性显示: none添加到其他所有div中。然而，这不允许我添加任何动画。

<div class="expand-column-wrapper">
  <div class="expanded-column">
    <h3 class="expand-column-header">Sustainable
Living</h3>
    <p class="expand-column-content">Hello there.</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Protecting Society</h3>
    <p class="expand-column-content">If you hover</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Health and Wellness</h3>
    <p class="expand-column-content">over each section</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Digital Communities</h3>
    <p class="expand-column-content">over each section</p>
  </div>
</div>

$white: white;

$expand-column-transition: all 1s ease-in-out;
$expand-column-background-color: #2c3840;
$expand-column-hover-width: 100%;
$expand-column-fluid: true;

.customDisplay{
  display: none !important;
}

.expand-column-wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .expanded-column {
    padding: 1rem;
    flex: 1 1 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: $expand-column-transition;

    &:hover{
      cursor: pointer;
    }
  }

  .expand-column-header, .expand-column-content {
    color: $white;
  }

  .expand-column-header {
    width: 100%;
    text-align: center;
  }

  .expand-column-content {
    font-weight: bold;
    opacity: 0;
    flex-basis: 1%;
  }
}

.tempClass{
    flex-basis: $expand-column-hover-width;
    .expand-column-content {
      opacity: 1;
      flex-basis: 50%;
      transition: $expand-column-transition;
    }
 }

.expand-column-wrapper .expanded-column {
  &:nth-of-type(1) {
    background: url('https://images.pexels.com/photos/2154/sky-lights-space-dark.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }

  &:nth-of-type(2) {
    background: url('https://images.pexels.com/photos/113744/helix-nebula-ngc-7293-planetary-fog-constellation-aquarius-113744.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }

  &:nth-of-type(3) {
    background: url('https://images.pexels.com/photos/2162/sky-space-dark-galaxy.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }

  &:nth-of-type(4) {
    background: url('https://images.pexels.com/photos/41951/solar-system-emergence-spitzer-telescope-telescope-41951.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }
}

$('.expanded-column').click(function (){
  var listL = $('.expanded-column');
  var listLen = listL.length;
  for(i = 0; i < listLen; i++){
    if(i != $(this).index()){
      $(listL[i]).addClass("customDisplay");
    }
    else{
      $(this).addClass("tempClass");
    }
  }
});

$('.expanded-column').mouseleave(function(){
  $(this).removeClass("tempClass");
  $('.expanded-column').removeClass("customDisplay");
});

Answer 1

也许这就是你要找的东西，这是这个https://jsfiddle.net/sandymizz/yfr0wpm5/的工作小提琴。我过去把内部div的位置绝对，而不是隐藏其他div，只是使他们不透明0。

​

$('.expanded-column').click(function() {
  var listL = $('.expanded-column');
  var listLen = listL.length;
  for (i = 0; i < listLen; i++) {
    if (i != $(this).index()) {
      $(listL[i]).toggleClass("customDisplay");
    } else {
      $(this).toggleClass("tempClass");
    }
  }
});

 $('.expanded-column').mouseleave(function() {
  $(this).removeClass("tempClass");
  $('.expanded-column').removeClass("customDisplay");
}); 

$white: white;
$expand-column-transition: all 1s ease-in-out;
$expand-column-background-color: #2c3840;
$expand-column-hover-width: 100%;
$expand-column-fluid: true;
.customDisplay {
  opacity: 0 !important;
}

.expand-column-wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .expanded-column {
    padding: 1rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: $expand-column-transition;
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    box-sizing: border-box;
    overflow: hidden;
    
    opacity: 1;
    background-position: center !important;
    background-size: cover !important;
    &:hover {
      cursor: pointer;
    }
      &.tempClass {
  width: $expand-column-hover-width;
  z-index: 1;
  left: 0 !important;
  .expand-column-content {
    opacity: 1;
    flex-basis: 50%;
    transition: $expand-column-transition;
  }
}
  }


  .expand-column-header,
  .expand-column-content {
    color: $white;
  }
  .expand-column-header {
    width: 100%;
    text-align: center;
  }
  .expand-column-content {
    font-weight: bold;
    opacity: 0;
    flex-basis: 1%;
  }
}


.expand-column-wrapper .expanded-column {
  &:nth-of-type(1) {
    background: url('https://images.pexels.com/photos/2154/sky-lights-space-dark.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }
  &:nth-of-type(2) {
    background: url('https://images.pexels.com/photos/113744/helix-nebula-ngc-7293-planetary-fog-constellation-aquarius-113744.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
        left: 25%;
  }
  &:nth-of-type(3) {
    background: url('https://images.pexels.com/photos/2162/sky-space-dark-galaxy.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
    left: 50%;
  }
  &:nth-of-type(4) {
    background: url('https://images.pexels.com/photos/41951/solar-system-emergence-spitzer-telescope-telescope-41951.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
    left: 75%;
  }
}

<div class="expand-column-wrapper">
  <div class="expanded-column">
    <h3 class="expand-column-header">Sustainable Living
    </h3>
    <p class="expand-column-content">Hello there.</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Protecting Society</h3>
    <p class="expand-column-content">If you hover</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Health and Wellness</h3>
    <p class="expand-column-content">over each section</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Digital Communities</h3>
    <p class="expand-column-content">over each section</p>
  </div>
</div>

​