Hide/unhide 元素点击

Question

THIS IS WHAT I AM TRYING TO MAKE IN THE FIDDLE BELOW

编辑： 我设法通过单击正确隐藏了它。但它会立即隐藏。有没有让它从屏幕底部滑动的选项？

下面老问题：

我试图在单击具有下拉效果的另一个元素时隐藏一个元素，但我遇到了问题。正如您在 fiddle 上看到的那样，它几乎可以工作，但是有一个剩余的背景，并且当信息向下滑动时，灰色的 X 切换按钮变小了。我该如何解决？

Here is the fiddle （点击上面有"X"的灰色区域）

<div id="full-width-slider" class="royalSlider heroSlider rsMinW rsDefault">
  <div class="rsContent">
    <img class="rsImg" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
    <div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="100" data-move-effect="top" data-speed="200">
      <a href="#" class="infox">X</a>
      <div class="minus7">
      <h4>Nice picture</h4>
      <p>This is the info about it. It´s nice, short and easy to read.</p>
      </div>
    </div>
  </div>


$(document).on("click", ".infox", function() {
    $(".minus7").slideToggle();
});

Answer 1

在容器上强制设置宽度可以解决折叠问题，但我不确定它是否完全符合您的要求。

.infoBlock {
    ...
    width: 220px;
}

Demo

将空白从容器移到内部元素会有所帮助，但仍需要改进。

.minus7 {
    ...
    margin-top: 50px;
    margin-bottom: 100px;
}

Demo 2

我认为它在 slideToggle 期间移动的原因是因为 left 值取自元素高度的中心。随着它变短，该位置移动。将变换原点设置为左下角可以解决此问题。

.infoBlock {
    ...
    transform: rotate(10deg) !important;
}

Demo 3

现在我们可以将文本对齐应用到按钮和一些 min-heights 并且我们更接近：

.infoBlock {
    ...
    min-height: 14px;
}

.infoBlock a {
    ...
    text-align: center;
    padding-top: 4px;
    display: inline-block;
    min-height: 90px;
}

Demo 4

然后我们可以切换 class 来控制外部元素的背景可见性：

$('.infoBlock').toggleClass('in out');

.infoBlock {
    ...
    transition: background .75s;
}
.infoBlock.out {
    background: transparent;
}

Demo 5

可以通过删除段落元素的边距并将其应用于标题来解决小的幻灯片抖动。

Demo 6

Hide/unhide 元素点击

Hide/unhide element onclick

html

css

jquery

royal-slider