Question

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

编辑：我设法通过点击正确隐藏它。但它立刻隐藏起来。是否可以选择让它从屏幕底部滑动？

以下老问题：

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

Here is the fiddle （单击灰色字段，使用＆＃34; X＆＃34;在其上）

<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

现在我们可以将文本对齐应用于按钮和一些最小高度，我们就更接近了：

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

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

<强> Demo 4

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

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

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

<强> Demo 5

可以通过从段落元素中删除边距并将其应用到标题来解决小幻灯片抽搐。

<强> Demo 6

隐藏/取消隐藏元素onclick

1 个答案: