js宽度等于父高度

Question

I have a common menu with structure nav > ul > li > a

If li has child dropdown menu I create dropdown toggle

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

I want the height and width .dropdown-toggle to be equal height parent (li), but it's not working

Where is a problem?

console.log(parentSize) print 42.2 - ok, this height

I know that there is a solution with CSS padding-top: 100% , but I want to use JS

Answer 1

use jquery as follows

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

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

and in html add the class dropdowntoggle to whatever element you want to apply it's parent's width.