js宽度等于父高度

Question

我有一个结构为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)打印42.2-好的，这个高度

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

Answer 1

按以下方式使用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添加到要应用的任何元素上，即父元素的宽度。