Javascript 基于父LI宽度动态定位嵌套UL

尝试实现以下效果

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>

---

我的问题的解决办法：

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

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