Jquery 单击时隐藏/取消隐藏元素

编辑：我通过单击成功地将其正确隐藏。但它马上就隐藏了。有没有让它从屏幕底部滑动的选项

老问题如下：

我试图在单击另一个具有slidedown效果的元素时隐藏一个元素，但我遇到了问题。正如你在小提琴上看到的，它几乎可以工作，但是有一个剩余的背景，当信息向下滑动时，灰色的X切换按钮更小。我怎样才能修好它

（单击带有“X”的灰色字段）

好照片
这是关于它的信息。它漂亮、简短、易读

$（document）.on（“click”，“.infox”，function（））{
$（“.minus7”）.slideToggle（）；
});

在容器上强制设置宽度可以解决折叠问题，但我不确定它是否完全按照您希望的方式运行

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

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

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

我认为它在滑动切换期间移动的原因是

left

值取自元素高度的中心。当它变短时，位置会移动。将变换原点设置为左下角可以解决此问题

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

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

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

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

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

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

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

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

---

到底是什么问题/不起作用？我正试图通过将类“minus7”向下移动onclick并将其向上移动onclick来隐藏/显示它，但我希望保持类“infox”完好无损并位于它所在的同一位置。正如你在小提琴上看到的，它几乎可以工作，但是有剩余的背景，并且灰色的X切换按钮在折叠时更小…为什么不使用呢？那么你只需要调用它，而不必检查状态。好的，谢谢，我可以使用滑动切换，但它不能解决我的问题…谢谢你的回复，我在这里做了一个工作示例：[但我无法使其工作。它在我的html页面中不起作用，即使在这种情况下，我也无法使其工作：[演示5对我来说很不错。我会尝试一下，谢谢！：）不知道为什么，但在我的真实代码中，文本下的黑框在单击后会立即消失，但当我再次单击时，它会显示得很慢，就像它应该显示的那样…有些东西取消了缓慢淡入淡出效果，不确定是谁和为什么…还有，有没有办法制作“.infoBlock”填充顶部：0px；？单击它后，它会停止“.infox”位置…禁用CSS3解决了即时显示的问题。但是您能帮我处理填充顶部的问题吗？

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

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