我想要的只是非常简单，但每次我尝试添加我想要的功能时，我就会越搞乱，所以我决定寻求帮助并坚持使用我现在的工作基本脚本。
我已经有一个正在进行的脚本，我希望开发工作几乎完全像这样： https://stackoverflow.com/a/7133084/1399030 { http://jsfiddle.net/Paulpro/YpeeR/25/ } （by： PaulP.R.O。）
思考... 图片库预览功能 ......有点儿。
在网页上点击.popCover或a.thumbnail时会触发“预览”范围，此隐藏范围将根据其指定的唯一ID < / strong>，通过jQuery将display: block;插入其CSS
这是一个包含多个项目的循环。
我已经走到这一步了，这是我使用的工作脚本：
$(document).ready(function() {
$('.popCover').click(function(){
divID = $(this).attr('id');
$("#tooltip-"+divID).fadeIn('5000', function() {
$("#tooltip-"+divID).css("display", "block");
});
});
$("a.thumbnail").click(function() {
dvID = $(this).attr('id');
$("#tooltip-"+dvID).fadeIn('5000', function() {
$("#tooltip-"+dvID).css("display", "block");
});
});
});
但是现在，我需要在这些函数中添加使跨度再次消失的触发器，（通过将display: none;插入其css。
我希望CURRENT SPAN在以下情况下消失：
01。鼠标点击在span元素之外
02。点击范围内的退出或 X 按钮。 （例如在图像库上，当它们预览图像时，通过单击元素外部或预览中提供的退出按钮退出图像）
重新点击 03。 .popCover或a.thumbnail（可能会触发显示其他ID的另一个范围。）
备注：
目前，我可以在页面上单击任意数量的锚点，并且所有这些具有不同ID的跨度只会累积并在页面上相互叠加。
我真的不想那样。 我不希望一次打开超过1个跨度，所以我希望添加一些功能，使当前打开的跨度在另一个锚点击时自动退出。
我确实尝试过这样做，但是......我无法得到我尝试过的方法。将所有这些功能添加到一起太复杂了，因为我不是jQuery专家。我可以让一个人去工作，然后通过尝试在另一个人工作来毁掉它。
另外，我正在考虑使用这种退出范围的类似方式：
$(".the_span").fadeOut("5000").css("display", "none");
我不愿意为我使用一些插件和简单的事情的唯一原因是，我已经非常喜欢我的“预览”跨度css，我已经准备好了。我只需要jquery部分就可以了：
触发时为display: block一个范围，如果符合上述条件，则为display: none。
希望得到帮助，并将非常感谢每一个人！谢谢。
答案 0 :(得分：0)
您必须尝试在打开/活动元素上添加一个类，然后绑定所有事件以关闭它。绑定必须在具有类.active的元素上完成，例如，当关闭时，必须删除.active类。
答案 1 :(得分：0)
我终于得到了这个工作！ ：o）
使用if ($("span.the_span").is(":visible"))检查当前{/ 1}}的范围当前是否可见/打开/或在其CSS中显示显示：阻止，以及if so ，to：
- 隐藏当前打开的范围，然后继续显示新范围。 -
这是我的工作成品，它解决了我想要的所有功能：
class="the_span"正如您所看到的，我还添加了 $(document).ready(function() {
// When clicks on either ".popCover" or "a.thumbnail" is made,
// Funcion clickPOP is triggered:
var clickPOP = function() {
divID = $(this).attr('id');
// Checks if "span.the_span" is already currently open:
if ($("span.the_span").is(":visible")) {
$("span.the_span").css("display", "none"); // If open, this is where it closes it..
$("#tooltip-"+divID).fadeIn('200', function() { // Then, proceeds to open the new clicked span here.
$("span.the_span #tooltip-"+divID).css("display", "block"); });
}
// But if no "span.the_span" is currently open:
// No need to close anything, it will directly open the new span...
else {
$("#tooltip-"+divID).fadeIn('5000', function() {
$("span.the_span #tooltip-"+divID).css("display", "block"); });
}
} // End of Function. Added functionality starts below...
// Exits "span.the_span" when mouse clicks outside of element
// ... ("Outside of element" means: outside of "span.the_span")
$(document).click(function(){
$("span.the_span").css("display", "none");
});
// Exit Button : Exits "span.the_span" when exit button is clicked
$('span.exitme').css('cursor', 'pointer').click(function(e){
$("span.the_span").css("display", "none");
e.stopPropagation();
});
// This makes sure that clicks inside "span.the_span" continue to work
$('span.the_span').click(function(e){
e.stopPropagation();
});
// This makes sure that clicks on ".popCover" continue to work
$(".popCover").click(function(e){
e.stopPropagation();
});
// This makes sure that clicks on "a.thumbnail" continue to work
$("a.thumbnail").click(function(e){
e.stopPropagation();
});
// Clicks on both ".popCover" & "a.thumbnail"
// ... will trigger actions specified on function: clickPOP.
$(".popCover").click(clickPOP);
$("a.thumbnail").click(clickPOP);
});
等，以获得我原来所需的功能，当鼠标点击元素时隐藏跨度，但要确保如果在网页上的$(document).click(function() （div）或.popCover （链接）上完成点击，仍然可以点击。
另外，如果没有这些帖子的提示，我将无法完成此方法的编写：
*运行相同的功能/不同的触发器： https://stackoverflow.com/a/1191837/1399030
*修复内部元素点击（包括退出按钮）： https://stackoverflow.com/a/4660691/1399030
*如何检查某些内容是隐藏还是可见： https://stackoverflow.com/a/178450/1399030
我特别发现上一篇文章非常有用（基本上它让我明白我在做什么），因为海报： Tsvetomir Tsonev 包含在他的代码评论中：
a.thumbnail我最初并没有理解jQuery能够检查或连接不是内联的CSS（我自己是一个jQuery noob），所以帖子确实很有启发性。
当然，如果有更好，更有效的方法来做到这一点，我会非常高兴能够开悟一些！ jQuery 对我来说仍然是一个学习曲线，我是一个非常渴望的学生！