內部（嵌套）李jQuery的位置函數返回零

我有嵌套李，這是水平subnav菜單。我正在嘗試使用jquery的position（）函數來獲取li的li位置，但它總是返回零。父母李同樣的功能正在工作。內部（嵌套）李jQuery的位置函數返回零

HTML代碼

<html> 
    <head> 
     <title>test</title> 
     <script type='text/javascript' src='js/jquery-1.4.2.js'></script> 
     <link rel="stylesheet" href="css/menu_style.css" type="text/css" /> 
     <script> 
      $(window).load(function() { 
       jQuery(document).ready(function() { 
        jQuery('.addchar').live('click', function(event) { 
         var position = $(this).position(); 
         alert(position.left); 
        }); 
       }); 
      }); 
     </script> 

    </head> 

    <body> 

     <div id="content"> 
      <div class="menu" id="menu"> 
       <ul> 
        <li><a href="#" class="addchar">A</a> 
         <ul> 
          <li><a href="#" class="addchar">Aword</a></li> 
         </ul> 
        </li> 
        <li><a href="#" class="addchar">B</a> 
         <ul> 
          <li><a href="#" class="addchar">Bword </a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

CSS代碼

.menu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    position:relative;/*should be relative*/ 
    font-size:16px; 
    font-weight:bold; 
} 
.menu ul{ 
    background:#333333; 
    height:40px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:900px; 
} 

.menu li{ 
    float:left; 
    padding:0px; 
    width:28px; 
    font-size:16px; 
} 
.menu li a{ 
    background:#333333 url("../img/seperator.gif") bottom right no-repeat; 
    color:#cccccc; 
    display:block; 
    font-weight:normal; 
    font-size:14px; 
    line-height:35px; 
    margin:0px; 
    padding:0px 12px; 
    text-align:center; 
    text-decoration:none; 
} 
.menu li a:hover, .menu ul li:hover a{ 
    background: #2580a2 url("../img/hover.gif") bottom center no-repeat; 
    color:#FFFFFF; 
    text-decoration:none; 
} 
.menu li ul{ 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:900px; 
    float:right; 
    z-index:200; 
} 
.menu li:hover ul{ 
    display:block; 

} 
.menu li li { 
    background:url('../img/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    margin:0px; 
    padding:0px; 
    width:36px; 
} 
.menu li:hover li a{ 
    background:none; 

} 
.menu li ul a{ 
    display:block; 
    height:35px; 
    font-size:14px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
} 
.menu li ul a:hover, .menu li ul li:hover a{ 
    background:#2580a2 url('../img/hover_sub.gif') center left no-repeat; 
    border:0px; 
    color:#ffffff; 
    text-decoration:none; 
}

來源

2011-02-01 kiranking

你的意思是在像素方面持何立場？ .position()給你的位置相對於抵消父母。由於每個菜單鏈接都是父級的唯一子級，所以返回值將始終爲零（如果您不做某些特殊的定位）。

你可能需要offset()，它給你相對於文檔的位置。

如果你想要得到的菜單項的指數集合中的所有菜單項，那麼你需要使用index()：

$('#menu ul ul .addchar').index(this);

來源

2011-02-01 10:12:12

雖然有多個孩子（非剝離HTML）我只是檢查第一個孩子，現在你提到了第一個孩子正確地返回位置值。謝謝 – kiranking 2011-02-01 11:05:00

內部（嵌套）李jQuery的位置函數返回零

回答

相關問題