jquery内容只显示一次

时间:2014-03-09 20:27:37

标签: jquery html5

<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;返回然后再次点击第一部分时,您已经点击它后内容不会显示。想知道造成这种情况的原因,不一定是答案,但任何事情都有帮助谢谢。

1 个答案:

答案 0 :(得分:1)

单击后退按钮时,您隐藏了li元素。单击导航元素后,您将显示ul元素。因此,li元素将被隐藏,但您在ul的可见性之间切换;因此什么都不会显示出来。

要解决此问题,只需在点击后退按钮时隐藏父ul而不是li

UPDATED EXAMPLE HERE

改变这个:

$('aside>ul>li:visible').hide();
$aAside.animate({
    left: 300
})

对此:

$('aside>ul:visible').hide();
$aAside.animate({
    left: 300
})