Question

我有三个设置为在li上弹出的div：使用CSS悬停。我希望这些div在他们的父li之上悬停在同一级别，而不管其内容的高度。为了做到这一点，我试图使用jquery来计算div的高度，然后设置一个负顶部值等于div的高度。这是我到目前为止所做的：

<script type="text/javascript">
$(document).ready(function() {
var pHeight = $('footer ul ul').height(); //Get height of footer popup
var nHeight = pHeight + "px"; //Calculate new top position based on footer popup height

        $('footer ul ul').css({ //Change top position to equal height of footer popup
            'top' : "-nHeight",
    });
});
</script>

Firebug一直告诉我解析top的值时出错，声明被删除了。有什么想法吗？

Answer 1

更改

'top' : "-nHeight",

到

'top' : "-" + nHeight

JavaScript不解析字符串中的变量。我还删除了,，因为它是多余的，它会在IE中产生错误。

Answer 2

您需要删除引号才能使用该变量，否则它会尝试将文字字符串"-nHeight"解析为数字：

<script type="text/javascript">
$(document).ready(function() {
  var pHeight = $('footer ul ul').height();
  var nHeight = pHeight;    
  $('footer ul ul').css({
     'top' : -nHeight
  });
});
</script>

或者，更紧凑的版本：

<script type="text/javascript">
$(function() {   
  $('footer ul ul').css({ top: -$('footer ul ul').height() });
});
</script>

根据高度动态更改元素的顶部位置

2 个答案: