動態位置寬度

Question

試圖實現以下效果

HTML代碼想這樣的：

<ul class="product-selection"> 
     <li> 
      <a href="#">Level One</a> 
      <ul> 
       <li> 
        <a href="#">Level Two</a> 
        <ul> 
         <li> 
          <a href="#">Level Three</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 

每個嵌套UL將從被絕對定位左邊，我想根據它的父母LI的寬度來設置UL的左值，以便它們彼此相鄰。

我能夠通過以下代碼實現第一次嵌套UL，有人可以提供一個更好的版本。

var ulWidth = 0; 
$j(function() { 
    ulWidth = ulWidth + $j('ul.product-selection > li').width(); 
    $j('ul.product-selection > li > ul').css({'left': ulWidth}); 
}); 

Answer 1

解決我的問題：

$j('.product-selection a').on('click', function(e) { 
    e.preventDefault(); 
    var prevLevel = $j(this).parents('.list-wrap').width(); 
    $j(this).next('.list-wrap').show(); 
    $j(this).next('.list-wrap').css({'left': prevLevel}); 
});