Question

关于我的早期问题this和答案here 我发布了这个新问题，因为这是更多Javascript相关。

我想创建一个包含CSS flex的下拉菜单。我正在努力让容器div与列一样宽。使用下面的代码，列表中最后一项完全离开的计算是错误的。看起来它正在计算到前一列的距离。

所以我拥有的是

<div class="cats">
    <ul>
        <li class="item sub">
            <a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
            <div class="subnav">
                <ul class="flex-wrap">
                    <li class="subitem title">
                        <a title="Borstvoeding" href="#" class="title">something</a>
                    </li>
                    <li class="subitem">
                        <a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a>
                    </li>
                    <li class="subitem">
                        <a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
                    <li class="subitem title">
                        <a title="Borstvoeding" href="#" class="title">something</a>
                    </li>
                <ul>
            </div>
        </li>
    </ul>
</div>

.cats .subnav {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #eee;
  display: none;
  margin: 0;
  padding: 30px;
  position: absolute;
  text-align: left;
  z-index: 99;
}
.cats .item.sub:hover .subnav {
  display: block;
}




.subnav .wrap{
            display:inline-flex;
            flex-flow : column wrap;
            align-content : flex-start;
            height : 350px;
            background : blue;
        }
.subitem{
    width : 150px;
    height:100px;
    background : red;
    margin : 20px;
}

$(document).ready(function() {
    $('.flex-wrap').each(function(index) {
        var lastChild = $(this).children().last();
        var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
        $(this).width(newWidth);
    });
});

以这种方式使用时，看起来它正在计算到前一列的距离。所以像200px而不是600px。这可能是由于定位造成的还是我做错了什么我现在完全忽略了？

Answer 1

<强> EDITED

无法获取所有li元素的宽度，因为它们位于display:none;。

我用your Fiddle制作了一些东西......
您将能够继续设计样式。 ;）

Jquery计算正确的容器大小

1 个答案: