jQuery height animate causes background color to be ignored

Question

Please see the fiddle, after animation on the second click background of the <ul> is not appearing any more, however inspecting the CSS in firebug shows the style is being applied. What is the problem ?

EDIT: The red background disappears after click on any <li>.

The relevant code:

HTML

<div style="position: relative;" class="selectCover">
    <button>Transfer</button>
    <ul style="position: absolute; left: -34.5px; top:-15px; display:none;" value="0040346781">
        <li class="selected">CANCEL</li>
        <li data-branch="SJ">SJ</li>
        <li data-branch="SYI">SYI</li>
        <li data-branch="SZ">SZ</li>
        <li data-branch="SY">SY</li>
        <li data-branch="SE">SE</li>
        <li data-branch="SG">SG</li>
        <li data-branch="SD">SD</li>
    </ul>
</div>

CSS

.selectCover ul{
   background: red;
}
li.selected{
    background: green;
}

jQuery

$('.selectCover').click(function(){
    $(this).find('ul').slideDown(100,function(){
        $(this).mouseleave(function(){
            $(this).slideUp(100);
            $(this).off('mouseleave');
        });
    });
});

$('.selectCover li').click(function(e){
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(e.target).parent().animate({height : 0});
});

Answer 1

Your javascript should look like this:

$('.selectCover').find('button').click(function(){
    $(this).parent().find('ul').slideDown(100,function(){
        $(this).mouseleave(function(){
            $(this).slideUp(100);
        });
    });
});

$('.selectCover li').click(function(e){
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(this).parent().slideUp(100);
});

There are 2 problems in your code:

There was a problem with your click events. Both click listeners where triggered because they were both clicked when you click an "li" element. This was caused by the click event on the complete container, and the click events on the sepperate "li" elements. Clicking an "li" element would also cause a click event on the complete container (thous your first declared listener would trigger again).

The second problem is that you put the height to the element to 0. slideDown() doesn't seem to update the DOM height value correctly, so the background gets drawn with 0 height.

I put the first click event on the button so it will not trigger when you click an "li" element.

here's your new fiddle:

http://jsfiddle.net/64zUr/

Answer 2

You need to edit below code.

Here you have tried using hide or slidup, but it was creating problem. To tackle this hide / slidup problem, you have used $(e.target).parent().animate({height : 0});, which is removing background color.

When you select item from the list, that click event getting propogated to selectCover div and hence it is becoming visible again when you are hiding or makind slideup.

please follow below code with both the problems resolved, and see jsfiddle

$('.selectCover li').click(function(e){
    e.stopPropagation(); // prevent propogation of click event to parent div
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(e.target).parent().slideUp(100); // removed animation as it will remove bg color, so using slideup only
});