Поведение меню (адаптивность)

Всем здравствуйте. Нарыл проблему на своих сайтах с адаптивностью. До этого как-то не замечал такой большой баг. Что имеем:

HTML

<div class="menu">
	<div class="container">
		<a href="#"></a>
		<ul>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li class="active"><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
			<li><a href="#">Item 5</a></li>
		</ul>
	</div>
</div>

CSS

.menu {padding:8px 0 7px; border-bottom:#000 1px solid; background:#232323}
.menu a {position:relative; display:block; padding:6px 15px; color:#999; font-size:90%}
.menu ul {margin:0; padding:0; list-style:none}
.menu ul li {float:left}
.menu .active a,
.menu .container > a {border-radius:5px; background:#454545; color:#ddd}
.menu .container > a {display:none}
.menu .container > a:hover {text-decoration:none}
.menu .container > a:after {position:absolute; right:16px; content:"\f0dc"; font-family:"FontAwesome"}

@media (min-width: 768px) and (max-width: 992px) {
	.menu {padding:7px 0 6px}
	.menu a {padding:6px 7px; font-size:80%}
}

@media (max-width: 768px) {
	.menu ul {display:none; margin-top:10px; margin-bottom:5px}
	.menu ul li {float:none}
	.menu ul li a {padding:8px 15px}
	.menu ul li.active a {background:none}
	.menu .container > a {display:block}
}

JS

$(document).ready(function(){
	$(".menu > .container > a").text($(".menu").find("li.active").text());
	$(".menu > .container > a").click(function(){
		$(this).parent().find("ul").toggle();
		return false;
	});
});

http://jsfiddle.net/vavj0mbn/

Проблема: при просмотре на планшете в альбомном режиме, показывается все меню, затем если планшет повернуть в портретный режим, меню скрывается в выпадающий по клику список. Так вот если в портретном режиме кликнуть на ссылку чтобы меню появилось, затем его закрыть и повернуть в альбомный режим, то меню исчезает в следствии того, что ему jQuery пишет display:none. Как грамотно обойти данный баг?