Jquery 使DIV在单击时可见

我有一个

div

id“overlay”，我想在用户单击包含它的

li

时使其可见

HTML：

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

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;
});

});

更新：代码正在运行。我已经将代码修改为我正在使用的代码。当点击LI.album时，DIV覆盖显示，但是，我有多个LI.album相邻，无论点击哪个LI，覆盖仅显示在第一个LI上。知道如何解决这个问题吗？

更改

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

到

而不是

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

使用

或

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

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

更改

$（“#覆盖”）.css（“可见性”：“可见”）至：

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

请参阅以获取一个实际示例

注意：您应该将
overlay
更改为class属性。
问题在于如何使用
css（）
jQuery方法。您需要使用
，
来分隔属性和值，而不是使用
：

像这样：

$(document).ready(function(){

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

});

拉小提琴

（请注意，自撰写本文以来，OP改变了他们在问题中编写属性的方式。）

更新

我必须向您展示如何使用多个
li


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

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

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

你什么意思？你想让它自动隐藏吗？“如何更改代码，使其在一段时间后关闭？”。如果要自动执行，请执行以下操作：

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

请记住，将“可见性”设置为“隐藏”只会隐藏它，但仍会占用空间。设置显示：无（隐藏（））将其完全隐藏

另一件事是，您不应该使用该div的id。您可能知道，id只能使用一次，这意味着您永远不能在具有相同功能的多个li上使用您的函数。我会让它成为一门课，然后：

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

这样，它将适用于每个有重叠div的li。
妈的，在你发表评论之前，我刚刚编辑了这篇文章。你知道如何让它在一段时间后隐形吗？某种超时feature@yatman，答案已更新，但您应该将其添加到问题中。此外，如果您有多个“#覆盖”项，则该项无效。在任何给定的html文档中只能使用一次id。（这是一个唯一的标识符，不是容器名）。@Dancrumb但他想点击它们。如果使用
.hide（）
，它们将消失，并且没有可单击的内容。@Dancrumb如果隐藏所有元素的子元素（这里就是这种情况），则该元素将无法单击。请看下面的例子。执行$（“#overlay”）.css（{visibility:“visible”}）没有什么错@特布雷克特：你是对的，但那不是行动计划的内容，原来是这样的！谢谢知道如何解决我遇到的新问题吗？我在更新中添加了它到原始postGot中，谢谢！如果你能看看我在帖子中编辑的更新，帮我解决新问题，我会非常感激。这段代码修复了你的多个
li
问题。我添加了一个实例。哇，效果很好。我不知道你能说什么，孩子们。非常感谢！请包括示例HTML，而不是试图描述它。。。你可能会错过一个重要的细节。建议您将演示代码放在
$(document).ready(function(){

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

});

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

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

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