Question

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

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

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

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

对于prev链接我很抱歉;

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

[的jsfiddle] [1]

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

Answer 1

而不是使用

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

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

}）;

我用过切换功能;

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

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

Answer 2

根据我的理解，当点击小黑盒子时，列表应该出现并消失 - 我看不到你更新的小提琴的链接所以这里是我对你的JS做的更新：

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

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

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

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

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

Answer 3

您只需切换即可忘记进入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();
});

<强> Example

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

3 个答案: