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。所以我在上面补充说。发生的事情是弹出窗口在加载时隐藏，然后当您单击a标签时，弹出窗口会添加类.reveal，然后显示它。

Answer 1

当您点击＆lt; a＆gt; 时，它会触发 onclick事件。我认为你可以将你的JQuery代码绑定到这个事件......比如：

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

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

即使父级已调整大小，也要使子级div与父级相同

1 个答案: