我有一个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;
});
});
更新：代码现在正在运行.我已经将代码修改为我正在使用的代码. DIV#overlay显示单击LI.album的时间,然而,我有多个LI.albums彼此相邻,无论点击哪个LI,#overlay仅显示在第一个LI上.知道如何解决这个问题吗？
解决方法
问题在于你如何使用css()jQuery方法.你需要使用a来分隔属性和值而不是：.
像这样：
$(document).ready(function(){
$(".album").click(function() {
$("#overlay").css("visibility","visible");
});
});
See here for a working example在jFiddle上.
(注意,自写这篇文章以来,OP改变了他们在问题中写入属性的方式.)
UPDATE
我已经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");
});
