$('.today-date').click(function(){
$(this).toggleClass('today-date-active');
$('.date-lst').toggleClass('date-lst-active');
});
<div class="date-calendar">
<p class="today-date">Апрель 2015</p>
<ul class="date-lst">
<li class="date-i">Май 2015</li>
<li class="date-i">Июнь 2015</li>
<li class="date-i">Июль 2015</li>
<li class="date-i">Август 2015</li>
</ul>
</div>
.date-lst{
display: none;
}
.date-lst-active{
position: absolute;
left: 0;
top: 41px;
display: block;
background: #f0f0f0;
z-index: 5;
width: 100%;
}
.today-date-active{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHCAYAAADTcMcaAAAAqElEQVQYV3XQMQuCYBDG8f/ZJ+u1ualwaGkoUIcIamtuK4gGFWpoaZCamtO+TF9D33gRzdRuvLsf93BCV/W9IT0uZEx5hY/mirSMARZ3hBSNImfUhL+ouHAjlw1psEP5ayy9JWNch19UAvSSZxRWCQauB3KowwIVkWK0XpBGp1Zk5c4ROZLjmItSAfSMJLp2PsY0bXcCcjZQsL03yIokiP+CcmD7Duj9B4thOpDGvdodAAAAAElFTkSuQmCC) no-repeat 93% 50%;
}
$(document).on('click', '.today-date', function () {
var item = $(this);
toggle();
if (item.hasClass('today-date-active')) {
$(document).one('click', toggle);
}
function toggle (e) {
item.toggleClass('today-date-active');
item.closest('.date-lst').toggleClass('date-lst-active');
}
});