隐藏/取消隐藏元素点击数

THIS IS WHAT I AM TRYING TO MAKE IN THE FIDDLE BELOW隐藏/取消隐藏元素点击数

编辑：我设法通过点击适当隐藏它。但它立即隐藏起来。是否有一个选项可以让它从屏幕底部滑动？

下面的老问题：

我试图用了slideDown影响的另一个元素，当点击隐藏的元素，但我与它的问题。正如你可以在小提琴上看到的那样，它几乎可以工作，但有一个剩余的背景，当信息下滑时，灰色的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(); 
});

来源

2017-02-22 user7176800

究竟什么是不工作的问题/？ –

嗯，我试图通过将onclick向下移动并将它移回onclick来隐藏/显示“minus7”类，但是我想保持class“infox”完好无损并位于同一位置。正如你可以在小提琴中看到的那样，它几乎可以工作，但有剩余的背景，并且折叠时灰色的X切换按钮更小... – user7176800

为什么不使用[sideToggle]（http://api.jquery.com/slidetoggle/ ），那么你只需要调用它而不必检查状态。 – GillesC

强制容器上的宽度解决了崩溃的问题，但我不知道它完全行为你会的方式喜欢。

.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

我们能然后切换一个类来控制后台可见性o n个外部元件：

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

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

Demo 5

小滑动抽搐可通过从段元件除去余量和其施加到代替标题来解决。

Demo 6

来源

2017-02-23 19:17:43 isherwood

感谢您的回复，我在这里做了工作示例：[https://jsfiddle.net/67L4yg3y/]但我无法使其工作。它没有在我的html页面中工作，即使在这个小提琴中我也无法使它工作：[https://jsfiddle.net/a0ure6st/39/] – user7176800

演示5对我来说很不错。我会试试看，谢谢！ :) – user7176800

不知道为什么，但在我真正的代码中，文本下的黑框立即onclick消失，但是当我再次点击时，它显示缓慢，因为它应该... Somethind是取消慢褪色效果，不确定whot和为什么... – user7176800

隐藏/取消隐藏元素点击数

回答

相关问题