javascript - 制作一个下拉菜单，其宽度取决于其中的部分数量

Question

我正在为一个站点构建一个下拉菜单，并且我正在尝试根据元素实例在其中包含多少个部分来更改父 div (.drop-down) 的宽度。共有 7 个 .drop-down 实例，每个实例包含不超过 3 个但至少 1 个不同数量的部分。这是我的代码哪里出错了？

    $('.drop-down').each(function(index) {
    var numSections = $(this).find('section').length;

        if (numSections = 1) {
            $('.drop-down').css('width','300px');
        }

        else if (numSections = 2) {
            $('.drop-down').css('width','600px');
        }

        else
            $('.drop-down').css('width','840px');
    });

任何帮助将不胜感激。

Answer 1

$('.drop-down').each(function(index)
{
    var numSections = $(this).find('section').length;

    if (numSections == 1) {
        $(this).css('width', 300);
    }
    else if (numSections == 2) {
        $(this).css('width', 600);
    }
    else if (numSections == 3){
        $(this).css('width', 840);
    }
});

Answer 2

你没有指定.drop-down你的目标是哪一类。尝试$(this)：

$('.drop-down').each(function(index) {
    var numSections = $(this).find('section').length;

        if (numSections = 1) {
            $(this).css('width','300px');
        }

        else if (numSections = 2) {
            $(this).css('width','600px');
        }

        else
            $(this).css('width','840px');
    });

您还可以将新宽度声明为整数而不是字符串，如下所示：

$(this).css('width',840);

编辑：这是一个基本的 jsFiddle：http: //jsfiddle.net/MFfgj/