For those curious about the issue, check out the JSFiddle. There seems to be an anomaly where the background of the <ul> element disappears after the animation on the second click. Oddly enough, even though Firebug shows that the CSS style is being applied, the red background just won't stay visible. Any idea what could be causing this hiccup?
UPDATE: The red background vanishes upon clicking any <li>.
The key snippets of code are highlighted below:
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});
});