jQuery不适用于css属性

Question

I'm getting crazy about a small function that I'm writing.

This function need to set the height of a container equal to the highest UL (3 UL in total and with absolute position) present inside it and, if the second or third UL are lower than the first one, set the height of these UL equal to the first one.

This is the function:

function fixNavHeight() {
    var cont = white,
        arr = [];
        lis = $('nav li');

    lis.each(function() {
        var li = $(this);
        li.mouseenter(function() {
            var childrenHeight = $(this).find(secondaryNavigation).height();
            cont.css('height', childrenHeight);
            setHeight(childrenHeight);
        });
    });

    function setHeight(base) {
        arr = [];
        cont.find('ul').each(function() {
            if($(this).is(':visible')) {
                var h = $(this).height();
                console.log(h);
                if(h <= base) {
                    $(this).css('height', base);
                }
                arr.push(h);
                var biggest = Math.max.apply(null, arr);
                cont.css('height', biggest);
            }
        });
    }
}

Everything works fine but if the UL is lower than base it doesn't set the css height and I can not understand why.

Can you help me to find the issue?

What I'm doing wrong here?

Answer 1

When applying height or width with .css() add the px suffix, like this:

cont.css('height', biggest +'px');

Do the same to all your similar calls.

Alternatively if you want to use your current syntax with just the number, then pass the css properties as an object to .css() , like this:

cont.css({'height': biggest});

Answer 2

Try to console.log these items inside the mouseenter callback:

secondaryNavigation
$(this).find(secondaryNavigation)
$(this).find(secondaryNavigation).height()

Check that secondaryNavigation is defined. It comes from nowhere in the code (probably some lines above) and it must be accessoible.