添加DISPLAY：NONE以跨越jQuery時：鼠標單擊外部跨度，或單擊退出按鈕等+

Question

我想要的非常簡單，但每次嘗試添加我想要的功能時，因此，我決定尋求幫助，並堅持我現在使用的基本腳本。

我已經有正在進行的劇本，我想發展到幾乎完全像這樣工作： https://stackoverflow.com/a/7133084/1399030{http://jsfiddle.net/Paulpro/YpeeR/25/}（按：PaulP.RO）

• 開放隱藏範圍
• 隱藏隱藏範圍
• 範圍有「關閉」按鈕退出範圍
• 隱藏當前打開的跨度時，另一跨度觸發

想...... 圖片廊預覽功能 ...種。當任.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

我想要的電流量程時消失：
01.鼠標點擊跨度電子商務外發lement
02.一個出口或x按鈕被點擊內部跨度。 （如在圖庫上，當他們預覽圖像時，通過在元素外部點擊或在預覽內提供的退出按鈕退出）
03..popCover或a.thumbnail被重新點擊（可能會觸發另一個跨度不同的ID以示）

注：
目前，我可以點擊頁面上的許多主持人和所有這些跨越具有不同ID的只是積累，並在頁面上疊起了對方。 我真的不想那樣。 我不希望超過一個跨度一次打開，所以我希望添加一些功能，使當前打開的跨度在另一個錨點單擊時退出本身。

我確實嘗試過自己做這個，但是......我無法得到我嘗試過的方法。由於我不是jQuery專家，因此將所有這些功能加在一起太複雜了。我可以讓一個人工作，然後試圖在另一個人的工作中毀掉它。

而且，我想用這個類似的退出跨度方式：

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

我不願意只使用一些插件和uncomplicate東西的唯一理由對我來說，我已經很喜歡我的「預覽」span css，我已經準備好了。我只需要jQuery的一部分工作：

到display: block跨度觸發，並display: none它，如果提到的條件得到滿足。

希望得到協助，並會非常感謝每一個！謝謝。

Answer 1

我終於得到了這個工作！ ：O）

通過使用if ($("span.the_span").is(":visible"))檢查跨度與class="the_span"是當前可見/開/或具有顯示：塊在CSS，如果這樣，以：
- 隱藏在繼續顯示新的跨度之前，當前打開的跨度。 -

這是我的工作成品，解決所有我想要的功能：

$(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()等獲得的我原來期望的功能躲在跨度當元素，但要確保，如果他們在.popCover（DIV）或a.thumbnail（鏈接）上個完成點擊仍可由外鼠標點擊e網頁。

而且，我不會已經能夠完成編寫這個方法沒有提示從這些帖子：
*運行相同的功能/不同的觸發器：https://stackoverflow.com/a/1191837/1399030
*內部元件固定點擊（包括退出按鈕）：https://stackoverflow.com/a/4660691/1399030
*如何檢查，如果事情是隱藏還是可見：https://stackoverflow.com/a/178450/1399030

我特別發現過去後非常有幫助的（和basical LY它讓我明白我在做什麼），因爲海報：Tsvetomir Tsonev包括在他的代碼註釋：

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

我真的不明白最初jQuery的是能夠檢查或與WASN CSS連接不要內聯（我自己是jQuery noob），所以這個帖子確實非常有啓發性。

---

當然，如果有更好，更高效的方法來做到這一點，我會很樂意多開悟！ jQuery對我來說仍然是一個學習曲線，我是一個非常渴望的學生！

Answer 2

您必須嘗試在打開/活動元素上添加一個類，然後綁定所有事件以關閉它。綁定必須在class .active的元素上完成，例如關閉時，必須刪除.active類。