显示/隐藏点击区域外的不同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。