顯示/隱藏點擊區域外的不同div（s）

Question

是否可以使用3個不同的模態框創建3個不同的鏈接？這是我的例子：

<ul class="menu"> 
    <li><a class="link" href="#">link1</a> 
     <div id="layer"> 
      <p>text 11</p> 
     </div> 
    </li> 
    <li><a class="link" href="#">link2</a> 
     <div id="layer"> 
      <p>text 2</p> 
     </div> 
    </li> 
    <li><a class="link" href="#">link3</a> 
     <div id="layer"> 
      <p>text3</p> 
     </div> 
    </li> 
</ul> 

...與JS：

$(function() {  
    $('#layer').hide(); 
    $('.link').click(function (e) { 
     var $message = $('#layer'); 

     if ($message.css('display') != 'block') { 
     $message.show(); 

     var yourClick = true; 
     $(document).bind('click.myEvent', function (e) { 
      if (!yourClick && $(e.target).closest('#layer').length == 0) { 
      $message.hide(); 
      $(document).unbind('click.myEvent'); 
      } 
      yourClick = false; 
     }); 
     } 

     e.preventDefault(); 
    }); 
    }); 

http://jsfiddle.net/innpe/xbJ6u/1/

但3個不同的鏈接顯示相同的文本（第一個）。我理解這個問題，但沒有想法如何在一個功能中實現它。

Answer 1

您單擊處理程序的第一行：

var $message = $('#layer'); 

...只是得到一個參照第一id="layer" DIV，它不會嘗試涉及，爲被點擊的項目。試試這個：

var $message = $(this).next(); 

演示：http://jsfiddle.net/xbJ6u/2/

當然，這依賴於具有格結構，以顯示爲被點擊鏈接的下一個兄弟。以下是在更靈活一點，它會允許你更改HTML的結構位（只要這些鏈接和相關的隱藏層屬於同裏）：

var $message = $(this).closest("li").find("#layer"); 

注意你不應該爲多個元素使用相同的id。