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

JQuery - Hide and Show - Not Functioning

本文关键字：不起作用 显示 隐藏 JQuery      更新时间：2023-09-26

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

我正在使用的 JQuery 代码是下面的，我创建了一个 JSFiddle 来显示 2 个示例，一个是我当前结果的前后。

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

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

我很抱歉上一个链接; 

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

JSfiddle][1]

[1] http://jsfiddle.net/jinghming/u4epkev4/

而不是使用 

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

}）;

我使用了切换功能; 

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

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

据

我了解，当单击小黑框时，列表应该出现并消失 - 我看不到指向您更新的小提琴的链接，所以这是我对您的 JS 所做的更新：

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

我还在您的 .card-list CSS 声明中添加了一个display: none;，并添加了以下内容：

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

如果您希望底部栏位于框的底部，则必须进行一些绝对定位。

在此处查看更新的小提琴：http://jsfiddle.net/u4epkev4/4/

你只需要做切换，你忘了进入card-text：

$(".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();
});

例

相关文章：