jquery - 使 DIV 在 LI 单击时可见

Question

我有一个 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>

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

});

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

Answer 1

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

像这样:

$(document).ready(function(){

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

});

See here for a working example在 jFiddle 上。

(请注意，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");
});