动态位置宽度

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}); 
});