Javascript JQuery-隐藏和显示-不起作用

我试图使用JQuery隐藏和显示脚本在单击div标记时在图像顶部显示文本

我使用的JQuery代码如下所示，我创建了一个JSFIDLE来显示两个示例，一个是before，一个是before，另一个是befort，一个是after，以及我当前的结果

• 更新：我已经设法让切换工作，并改变了一些CSS。但需要隐藏div标记，直到单击为止

任何帮助或反馈都将非常感谢（Y）

我对上一个链接感到抱歉

$(".card-options").click(function () {
$(".card-list").toggle();
});

[JSfiddle][1]

[1] 而不是使用

$("#div").click(function(){
$(".box").hide();
});

$("#div").click(function(){
$(".box").show();

}))

我使用了切换功能

$("#div").click(function () {
$(".box").toggle();
});

---

*仍在研究如何在单击#div之前隐藏.box。但目前确实在隐藏和显示之间切换。

据我所知，当点击小黑匣子时，列表应该会出现和消失-我看不到你更新的小提琴的链接，因此下面是我对你的JS所做的更新：

$(".card .card-options").click(function () {
    $(this).parents('.card').find('.card-list').toggleClass('active');
});

我还添加了一个

display:none

添加到您的

.card列表

CSS声明中，并添加以下内容：

.card-list.active {display: block;}

如果你想让底部的条在盒子的底部，那么你必须做一些绝对定位

请参见此处更新的小提琴：

---

您只需执行切换，但忘记进入

卡片文本：

$(".card-list").hide(); // Hides the card list at the start
$(".card .card-text .card-options").click(function () {
    // Toggle the card-list for the clicked card
    $(this).parent().parent().find(".card-list").toggle();
});

我没有点击那个链接。请发表一篇普通的文章，而不是一篇协作文章。或者更好的是，使用SO的内置堆栈片段功能直接将代码放入问题中。我错误地点击了链接。小提琴在所有的画面上都有一些奇怪的覆盖物。Barmar是对的-不要点击它。一些非常奇怪的协作工具，以前从未见过。不要点击小提琴链接“人物”。@Giannis很抱歉，你先隐藏了div，我将div的css属性设置为display:none。