0

所以我有我正在构建的这个东西，当用户点击一个 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 类，然后使其显示出来。

4

1 回答 1

0

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

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

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

于 2013-03-24T02:31:40.403 回答