Question

我有一个div ID“叠加层”，当用户点击包含它的li时，我想让它显示出来。

HTML：

<ul>
    <li class="album" id="nirvana-nevermind">
         <div id="overlay">
              <a href="http://www.nirvana.com">Nirvana</a> Nevermind
         </div>
    </li>
</ul>

CSS：

#overlay { visibility: hidden; }

javascript：

$(document).ready(function(){

$(".album").click(function() {
    //need the following to toggle
    $("#overlay").css("visibility", "visible");    
});

$("#overlay").click(function() {
    window.location=$(this).find("a").attr("href");
    return false;
});

});

更新：代码现在正在运行。我已经将代码修改为我正在使用的代码。 DIV＃overlay显示单击LI.album的时间，然而，我有多个LI.albums彼此相邻，无论点击哪个LI，#overlay仅显示在第一个LI上。知道如何解决这个问题吗？

Answer 1

问题在于你如何使用css() jQuery方法。您需要使用,来分隔属性和值，而不是:。

像这样：

$(document).ready(function(){

$(".album").click(function() {
    $("#overlay").css("visibility", "visible");
});

});

jFiddle上的

See here for a working example。

（请注意，自写这篇文章以来，OP改变了他们在问题中写入属性的方式。）

<强>更新

我已updated the code on JSFilddle了解如何使用多个li来完成此操作。

See here for the full JSFiddle example

首先，我已将您的ID覆盖更改为类。这是因为ID只能在任何给定的HTML文档中存在一次。它是一个唯一的标识符，而不是容器。

Thr JS代码只是查看当前对象（刚刚单击的对象）并查找类名为“overlay”的所有子代。然后将可见性设置为对这些项目可见。

$(".album").click(function() {
   $(this).children(".overlay").css("visibility","visible");
});

Answer 2

而不是

 $("#overlay").css("visibility":"visible");

使用

 $("#overlay").show();

或

 $("#overlay").css("visibility","visible");

要让它在一段时间后消失，请查看setTimeout方法并使用

 $("#overlay").hide();

Answer 3

更改

$("#overlay").css("visibility":"visible");

到

$("#overlay").css("visibility", "visible");

Answer 4

将$("#overlay").css("visibility":"visible");更改为：

$(this).children("#overlay").css("visibility", "visible");

有关实例，请参阅fiddle。

注意：您应该将overlay更改为类属性。

Answer 5

你是什么意思？你想要它自动隐藏#overlay吗？ “我如何更改我的代码，以便在一段时间后切换它？”。如果您想自动完成，请执行以下操作：

var hide = setTimeout(function () {
    $('#overlay').css('visibility', 'hidden');
}, 5000);

请记住，设置隐藏的可见性只会隐藏它，但仍会占用空间。设置 display：none（hide（））会完全隐藏它。

另一件事是你不应该对该div使用id。您可能知道，ID只能使用一次，表示您永远不能在具有相同功能的多个li上使用您的功能。我会把它变成一个类然后：

$('.album').click(function () {
    $(this).children('.overlay').css('visibility', 'hidden');
});

这种方式适用于每个具有叠加div的li。

在LI点击时可以看到DIV

5 个答案: