时间戳

首页 > 解决方案 > js宽度等于父高度

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)打印 42.2 - 好的，这个高度

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

标签： javascriptequals

解决方案

使用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 中将类 dropdowntoggle 添加到要应用其父宽度的任何元素。

推荐阅读