Javascript 单击时图像不工作 当你点击屏幕顶部的导航项时，一个空白的div弹出一个巨大的“X”图像，点击时，X图像将关闭空白div和其他所有的图像。对于“工作、联系、新闻和法律”来说，单击它不起作用，但是对于“支持”来说，它可以完美地工作。我将代码并排放置以查看错误，复制支持代码并为其他人粘贴。。。基本上，在1-2小时内可以想象到的一切。我发现一个小问题，当你先打开“支持”，然后关闭并打开另一个，x图像工作，但我不知道为什么。这是我的html，其余的代码将上传到可待因

演示：

乔布斯
联系
按
合法的
支持
公开接触

---

任何帮助都将不胜感激：D

问题是，您的所有弹出式容器（作业弹出式窗口、联系人弹出式窗口等）都绝对位于同一位置，具有相同的z索引。由于支持弹出窗口是html中的最后一个，它将所有弹出窗口容器隐藏在它下面。您从未实际单击过其他x图标（仅在顶部支持图标上），因此不会触发单击处理程序

为了快速修复，您可以在导航单击处理程序中更新z索引。例如：

$("#job").click(function() {
    $("#job-popup").fadeIn(300);
    $("#job-popup").css({'z-index': 15});
    $("#job-content").fadeIn(300); 
    $("#jobWords").fadeIn(300); 
    $(".x-icon1").fadeIn(300); 
    $("#name").fadeOut(300); 
    $("#container").css("-webkit-filter", "blur(10px)");
}

然后把它移回到这里

 $(".x-icon1").click(function() {
     $("#job-popup").fadeOut(); 
     $("#job-popup").css({'z-index': 10});
     $("#job-content").fadeOut(); 
     $("#jobWords").fadeOut(); 
     $(".x-icon1").fadeOut();  
     $("#name").fadeIn();  
     $("#container").css("-webkit-filter", "blur(0px)");
}

然后为所有的点击处理程序复制这个

---

<> P>但是你也应该考虑重构你的HTML/CSS，因为结构不正确（例如，头部内的身体），并且很多CSS可能是不必要的。p> 找不到您的铅笔代码页，请检查。Opps D:Fixed:D谢谢您的代码似乎工作正常，但很难说。请您更新您的钢笔，使其使用绝对URL，并以一种简单的方式清楚地说明这个问题。谢谢：）你的HTML代码太奇怪了，为什么你把body标签放在head标签里面呢？老实说，我是新手，所以请原谅我D：非常感谢：D和OOHOOOO我知道z-index出了问题。我修好了身体和头部的东西。哪些代码是不必要的？Np:）几乎您的整个布局都是使用绝对位置完成的。这意味着将所有元素从默认DOM流中移除，然后元素也不知道它们周围的任何其他元素。如果你把所有的东西都保持在正常的流程中，你的布局会更加灵活，你不需要为每个元素添加特定的位置（上、右、下、左）。我的意思是，如果我不添加位置的东西，它就不会去我需要的地方

 $(".x-icon1").click(function() {
     $("#job-popup").fadeOut(); 
     $("#job-popup").css({'z-index': 10});
     $("#job-content").fadeOut(); 
     $("#jobWords").fadeOut(); 
     $(".x-icon1").fadeOut();  
     $("#name").fadeIn();  
     $("#container").css("-webkit-filter", "blur(0px)");
}