即使在父母调整大小之后，创建一个与父母高度相同的小孩div

Question

所以我有这个东西是我正在构建的，会发生什么情况是当用户单击li元素时，会打开一个弹出窗口与主父容器相同的高度。

<div class="tools"> 
    <ul> 
     <li> 
     <a>Click Me to Open Popup Window</a> 
     <div class="popup"> 
      <header>Title Goes Here</header> 
      <ul> 
       List elements that clickable and close the popup. 
      </ul> 
     </div> 
     </li> 
    </ul> 
</div> 

我所拥有的一切工作正常使用此代码：

// this is the js that sets the height of the popup. 
    var popHeight = $('.tools').height() - 23; 
    $('.popup ul').css({'height': popHeight + 'px'}); 

// This is the js that reveals the popup. 
    $('.tools ul li a').live('click', function(){ 
     $(this).parent().find('.popup').addClass('reveal'); 
    }); 

的基本想法是，在弹出的UL必须是相同的高度.tools容器减去的高度头。

现在，唯一出现的问题是高度.tools可能因为元素被动态地添加到它而改变。因此，如果您已经打开了一次弹出窗口，那么.tools div高度会发生变化，并且您再次单击以打开弹出窗口，其高度将与第一次相同，但不会调整为与高度相同的高度.tools的新高度。

那么我该如何处理jquery，以便在弹出之前重新检查.tools的高度，以便始终保持正确的高度？

谢谢！

- 编辑 -

我忘了，包括揭示在点击弹出的JS。所以我在上面加了。弹出窗口会在加载时隐藏，然后当你点击一个标签时，弹出窗口会添加.reveal类，然后显示它。

Answer 1

当您单击<一个>它激发了onclick事件。我想你可以jQuery代码绑定到这个事件......是这样的：

$('div.tools > ul > li > a').click(function(){ /* put your code here */ }); 

我这里没有测试它，但我认为这可能会有帮助。