有什么办法可以使div扩展以覆盖所有可用空间，隐藏其扩展到的所有内容吗？

时间：2019-10-22 06:57:52

标签： javascript html css

我有一个父div，它包含4个相等的div（每个25％），并排水平并排，包含一个图像。我希望div在单击时扩展，以便div设置动画以覆盖整个父div（宽度为100％）。然后在图像上方添加一些动画效果。

我正在尝试通过CSS中的flex框执行此操作，但是即使单击的div扩展了，它也无法覆盖整个父div。其余3格缩小，但不会完全消失。

我还尝试通过Javascript来实现此目的，方法是添加属性display：所有其他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");
});

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题