即使在父母調整大小之後，創建一個與父母高度相同的小孩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 */ }); 

我這裏沒有測試它，但我認爲這可能會有幫助。