javascript - 添加 DISPLAY : NONE to span via jQuery when: mouse-click outside span, 或单击退出按钮等+

Question

我想要的非常简单，但是每次我尝试添加我想要的功能时，我都会把事情搞砸，所以我决定寻求帮助并坚持使用我现在拥有的工作基本脚本。

我已经有一个正在进行中的脚本，我希望将其开发为几乎完全像这样工作: https://stackoverflow.com/a/7133084/1399030 { http://jsfiddle.net/Paulpro/YpeeR/25/ }(作者:PaulP.R.O.)

• 打开隐藏范围
• 隐藏隐藏范围
• Span 有“CLOSE”按钮可退出 Span
• 触发另一个 Span 时隐藏当前打开的 Span

想想...图片库预览功能...有点。

当在网页上点击 .popCover 或 a.thumbnail 时，会触发“预览”跨度，此隐藏跨度将根据在其指定的唯一id上，通过 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 的另一个范围。)

注释:
目前，我可以在页面上单击任意多个 anchor ，并且所有这些具有不同 ID 的跨度只会在页面上累积并相互堆叠。 我真的不想那样。 我不希望一次打开超过 1 个跨度，因此我希望添加功能，使当前打开的跨度在进行另一次 anchor 单击时自行退出。

我确实尝试过自己做这件事，但是......我无法获得我尝试过的方法。由于我不是 jQuery 专家，因此将所有这些功能添加在一起太复杂了。我可以让其中一个工作，然后尝试在另一个工作中毁掉它。

此外，我正在考虑使用这种类似的方式退出跨度:

$(".the_span").fadeOut("5000").css("display", "none");

我不愿意只使用一些插件和对我来说不复杂的东西的唯一原因是，我已经非常喜欢我的“预览”跨度CSS，我已经准备好了。我只需要 jquery 部分即可工作:

触发时display: block一个跨度，如果满足上述条件则display: none它。

希望得到帮助，并且非常感谢每一位帮助!谢谢。

Answer 1

您必须尝试在打开/事件的元素上添加一个类，然后绑定(bind)所有事件以关闭它。必须对具有 .active 类的元素进行绑定(bind)，例如，当关闭时，必须删除 .active 类。