Question

我想关联两个元素的宽度，第一个是简单的div，第二个是span。

<div id="wb_Name_To_Menu" style="position:absolute;left:768px;top:20px;width:171px;height:18px;z-index:4;">
<span id="sp_Name_To_Menu" style="color:#FF0000;font-family:Arial;font-size:16px;">Love Me!</span></div>    
<div id="Layer_to_mainu" style="visibility: hidden;position:absolute;text-align:left;left:772px;top:22px;width:132px;height:135px;z-index:132;" title="">
    <div id="wb_main_mainu" style="position:absolute;left:8px;top:9px;width:123px;height:28px;z-index:1128;padding:0;">
    <div id="main_mainu">
    <ul style="display:none;">
    <li><span></span><span id="id_full_name_from_main_menu">love&nbsp;Meeeeee</span>
    <ul>
    <li><span></span><span>Account&nbsp;Sitting</span></li>
    <li><span></span><span>Help</span></li>
    <li><span></span><span>Log&nbsp;Out</span></li>
    </ul>
    </li>
    </ul>
    </div>

JavaScript中的

：

$(document).ready(function(){
  $("#wb_Name_To_Menu").hover(function(){ 
    $("#Layer_to_mainu").css("visibility","visible");  
    $("#Layer_to_mainu").css("width",$("#id_full_name_from_main_menu").width()+"px");
  });
});

$(document).ready(function(){
  $("#Layer_to_mainu").mouseleave(function(){
    $("#Layer_to_mainu").css("visibility","hidden");
  });
});

它不起作用！我知道原因：它是由$("#id_full_name_from_main_menu").width()引起的，导致空值！

Answer 1

如果删除+"px"在您提供的脚本的第4行，它似乎可以正常工作。

$("#Layer_to_mainu").css("width",$("#id_full_name_from_main_menu").width());

Answer 2

$("#id_full_name_from_main_menu").width()返回0，因为其祖先<ul>已设置display:none。要读取宽度，您可能只想删除该属性，或者您可以在js中暂时更改它，具体取决于您要执行的操作

$(document).ready(function(){
  $("#wb_Name_To_Menu").hover(function(){ 
  $("#Layer_to_mainu").css("visibility","visible"); 
  $("#main_mainu > ul").css("display","block");
  $("#Layer_to_mainu").css("width",$("#id_full_name_from_main_menu").width()+"px");
  $("#main_mainu > ul").css("display","none");
});

这不会显示您的文字，但会更新#id_full_name_from_main_menu的宽度，您需要移除display:none才能看到您的文字。

两个元素的相关宽度

2 个答案: