javascript - js宽度等于父高度

我有一个结构为nav > ul > li > a的通用菜单

如果li有子下拉菜单，则创建下拉开关

var dropdownToggle = $('<button />', {
  'class': 'dropdown-toggle',
  'aria-expanded': false
});

container.find('.menu-item-has-children > a').after(dropdownToggle);

var parentSize = dropdownToggle.parent().height();
dropdownToggle.height(parentSize);
dropdownToggle.width(parentSize);

.dropdown-toggle {
  position: absolute;
  right: 0;
  top: 0;
}

我希望高度和宽度.dropdown-toggle等于高度父(li)，但是它不起作用

哪里有问题？
console.log(parentSize) print 42.2-好的，这个高度

我知道CSS padding-top: 100%有解决方案，但是我想使用JS

最佳答案

使用jquery如下

$('.dropdown-togggle').css({
'width':$(this).parent().width()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

并在html中将class dropdowntoggle添加到要应用的任何元素上，即父元素的宽度。