1

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

我已经有一个正在编写的脚本，我想开发它几乎完全像这样工作： https ://stackoverflow.com/a/7133084/1399030 { http://jsfiddle.net/Paulpro/YpeeR/25/ } （作者：PaulP.RO）

  • 打开一个隐藏的跨度
  • 隐藏隐藏的跨度
  • 跨度有“关闭”按钮退出跨度
  • 触发另一个跨度时隐藏当前打开的跨度

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

当在网页上单击.popCover或单击时触发“预览”跨度，这个隐藏的跨度将根据其指定的唯一 id显示，通过 jQuery 插入到其 css 中。 这是在一个包含多个项目的循环内。 a.thumbnaildisplay: block;

我已经做到了这一点，这是我使用的工作脚本：

$(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.在跨度元素之外单击鼠标
02.在跨度内单击退出或X按钮。（就像在图像库中，当他们预览图像时，通过单击元素外部或预览中提供的退出按钮退出它）
03. .popCover或被a.thumbnail重新单击（可能会触发另一个不同 ID 的跨度来显示。 )

注意：
目前，我可以在页面上单击尽可能多的锚点，所有这些具有不同 ID 的跨度只是在页面上累积并相互叠加。我真的不想要那个。我不希望一次打开超过 1 个跨度，因此我希望添加功能，使当前打开的跨度在再次单击锚点时自行退出。

我自己确实尝试过这样做，但是...我无法获得我尝试过的方法。因为我不是 jQuery 专家，所以将所有这些函数加在一起太复杂了。我可以让一个工作，然后通过尝试在另一个工作来破坏它。

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

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

我不愿意只使用一些插件和简单的东西的唯一原因是，我已经非常喜欢我的“预览”跨度 css，我已经准备好了。我只需要 jquery 部分来工作：

display: block触发时的跨度，如果满足display: none上述条件。

希望得到帮助，将非常感谢每一位！谢谢你。

4

2 回答 2

0

我终于让这个工作了！:o)

通过使用检查if ($("span.the_span").is(":visible"))跨度当前是否可见class="the_span"/打开/或在其 CSS 中具有display: 块，如果是，则：
- 在继续显示新跨度之前隐藏当前打开的跨度。-

这是我的工作成品，它解决了我想要的所有功能：

   $(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()etc. 以获得我最初想要的功能，即当鼠标在元素外部单击时隐藏跨度，但确保在.popCover (div)或a.thumbnail (链接）在网页上。

此外，如果没有这些帖子的提示，我将无法完成编写此方法：
* 运行相同的功能/不同的触发器： https ://stackoverflow.com/a/1191837/1399030
* 修复单击内部元素（包括退出按钮）： https ://stackoverflow.com/a/4660691/1399030
*如何检查某些东西是否隐藏或可见： https ://stackoverflow.com/a/178450/1399030

我特别发现最后一篇文章非常有帮助（基本上它让我明白了我在做什么），因为海报：Tsvetomir Tsonev包含在他的代码注释中：

// Checks for display:[none|block], ignores visible:[true|false]"

我最初并不真正理解 jQuery 能够检查或连接非内联的 CSS（我自己是一个 jQuery 菜鸟），所以那篇文章确实很有启发性。

当然，如果有更好、更有效的方法来做到这一点，我会很高兴能得到更多的启发！jQuery对我来说仍然是一个学习曲线，我是一个非常渴望的学生！

于 2012-06-03T06:27:36.737 回答
0

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

于 2012-06-02T13:47:38.577 回答