即使在父级调整大小后，也使子级 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');
    });

基本思路是popup的ul的高度必须与.tools容器的高度减去header的高度相同。

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

那么我可以用 jquery 做什么，以便它在弹出之前重新检查 .tools 的高度，使其始终是正确的高度？

谢谢！

-- 编辑--

我忘记包含在点击时显示弹出窗口的 js。所以我在上面添加了。发生的情况是弹出窗口在加载时被隐藏，然后当您单击 a 标签时，弹出窗口会添加 .reveal 类，然后使其显示出来。

Answer 1

当您单击 时，它会触发 onclick 事件。我认为您可以将您的 JQuery 代码绑定到此事件...类似于：

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

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