javascript - 如何使下拉菜单与触发按钮具有相同的宽度

Question

在图像中，这就是我想要实现的目标:

这就是我开始使用 js 的方式:

$(document).ready(function(){
            var userWidth = $('#userOptions.width()');
            var menuWidth = $('#userOptionsMenu.width()')


            function menuMatch() {
                if(menuWidth < userWidth) {
                    menuWidth = userWidth;
                }
            }

            menuMatch();

        });

这是带有 ID 的图像:

在函数 menuMatch() 中，我不确定如何用 JS 编写如何使某些元素的宽度等于当前比它窄的元素。

这有意义吗？

谢谢。

这是代码笔的链接 http://codepen.io/MARS/pen/cGwbC

Answer 1

您错误地拉动了 jQuery 宽度属性。更改此:

var userWidth = $('#userOptions.width()');
var menuWidth = $('#userOptionsMenu.width()')

对此:

var userWidth = $('#userOptions').width();
var menuWidth = $('#userOptionsMenu').width();

这将为您提供需要设置的宽度。然后要正确应用CSS，您需要这样做:

function menuMatch() {
    if(menuWidth < userWidth) {
        $("#userOptionsMenu").css("width", userWidth + "px");
    }
}