<script>
$(document).ready(function () {
$('nav>li').hide();
$('ul').hide();
$('h2').hide();
$('a.btnDown').click(function () {
$('body').css('background', 'tomato');
$('nav>ul li:hidden').each(function(i) {
//$('nav>h1').fadeOut(300);
//$('nav>ul').fadeIn(200);
$('h1').hide();
$('nav>ul').delay(i*600).fadeIn(200);
return false;
});
}); //closes a.btnDown
$('nav>li').click(function () {
$('nav>ul li:visible').each(function(i) {
$('h1').show();
$('nav>li').hide();
$('ul li').hide();
//clearTimeout(fadeTimeout);
$('nav>li').delay(i*600).fadeOut(200);
}); //closes visible i
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.css("left", "auto");
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$nav.css("left", "auto");
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
$('a.bck').click(function() {
var $aAside = $('aside');
$('aside>ul>li:visible').hide();
$aAside.animate({
left: 300
})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10
})
return false;
}); //closes bck click
}); //closes .ready()
</script>
http://jsfiddle.net/LPDkg/是我正在处理的代码的链接。当您转到菜单&gt;第一部分&gt;返回然后再次点击第一部分时,您已经点击它后内容不会显示。想知道造成这种情况的原因,不一定是答案,但任何事情都有帮助谢谢。
答案 0 :(得分:1)
单击后退按钮时,您隐藏了li
元素。单击导航元素后,您将显示ul
元素。因此,li
元素将被隐藏,但您在ul
的可见性之间切换;因此什么都不会显示出来。
要解决此问题,只需在点击后退按钮时隐藏父ul
而不是li
。
改变这个:
$('aside>ul>li:visible').hide();
$aAside.animate({
left: 300
})
对此:
$('aside>ul:visible').hide();
$aAside.animate({
left: 300
})