高级jquery循环隐藏导航

advanced jquery loop to hide nav

本文关键字：导航 隐藏 循环 jquery 高级      更新时间：2023-09-26

所以我怀疑这是高级的jquery，但对我来说它是，因为我这周刚刚学会它。我写了我需要的一切实际上在这里我唯一的问题是，我知道这是因为我是新的jquery，但是当你点击菜单，然后任何一个导航选项，然后回来，它不是隐藏的内容或隐藏的nav当内容存在，即使我写了它，所以它应该(它只工作一次，因为我是新的，我知道这就是为什么，我的语法有问题)。有什么建议吗?

HTML 

<script>
$(document).ready(function () {
    //$('ul:first').hide();
    //$('ul li').hide();
    $('nav>li').hide();
    $('ul').hide();
    $('h2').hide();
    /*('h1>').click(function (event) {
        $('nav>ul li:hidden').each(function(i) {
            $('nav>li').show();
            $('h1').hide();
            $(this).delay(i*600).fadeIn(200);
        });
        $('nav>ul li:visible').each(function(i) {
            $('h1').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.animate({
                    right:  300})
            //move menu out of way
                var $menu = $('.menu');
                $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');
        $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>
</head>
<body>
<h1 class="menu"><a class="btnDown" href="#"> Main Menu </a></h1>
<nav class="navBar" >
        <li><a class="menuShow" href="#"> Assignment 6 </a></li>
        <ul>
            <li><a class="contentDown" href="#" > Part One </a></li>
            <li><a class="contentDown" href="#"> Part Two </a></li>
            <li><a class="contentDown" href="#"> Part Three </a></li>
            <li><a class="contentDown" href="#"> Student Notes 1 </a></li>
            <li><a class="contentDown" href="#"> Student Notes 2 </a></li>
            <li><a class="contentDown" href="#"> Student Notes 3</a></li>
        </ul>
</nav>
<h2 id="round"><a class="bck" href="#"> Back </a></h2>
<aside>
                <ul>
                    <li> Interactive media has been apart of my life since as long as I can remember. I have always been fascinated with any form of media including television, video games, handheld games, or websites. However before attending school to study interactive media, I never noticed the little things that can really affect the experience for a user. One item in particular being diegetic elements. Diegetic elements are objects within a media that only the user knows about. For instance, in a video game a diegetic element would be the items you see on the side of the screen that inform you how much health or ammo you have remaining. These are necessary components for they are needed to tell the player perhaps where to go for their next objective, or if any enemies are around you. We have also been exposed to 'non-diegetic' elements that act just the opposite of diegetic ones. Non-diegetic elements are items inside interactivity that are supposed to be there. This is a way of implementing a diegetic element into the space of the world you create. For example, a non-diegetic element would be the ammo bar being placed on the gun, instead of a static bar on the side of the screen. Some patterns being used in interactive media today include the majority of diegetic elements that would at one time be diegetic, but attempting to translate it into a non-diegetic element.  </li>
                </ul>
                <ul>
                    <li> One ways people have done this is throwing elements in the world that would be believable to the player that they should be there. Instead of throwing a sidebar with your gun ammo and grenade count, it would make sense if a game is placed in modern-time that we would have technology available to put that information on the gun. One of the biggest examples of great uses of non-diegetic elements in the way the players health is damaged. Older games will have a health bar, but more modern games will mostly have a “shock” state where the screen might turn red, or your player begins to lose the ability to act normal when they are under fire. Does this mean we should stop using diegetic elements altogether? This is a question anyone in any form of interactive media should be asking themselves. The problem is that you can have too much non-diegetic presence that would confuse the user instead of help them which was originally intended. Resident Evil received a lot of harsh criticism for their lack of diegetic presence to help the player finish the game. It was hard for the user to be able to tell when the character was going to die based on their health system. If you received damage your character will hunch over, but it's unclear how much damage you're taking. The user will often die  </li>
                </ul>
                <ul>
                    <li> without knowing whether or not you should have died, as opposed to a health bar that would show you. Contrary to too much non-diegetic presence, is too much diegetic elements. In titles such as World of Warcraft, or League of Legends, some are simply overwhelmed by the fact that half of the screen is objects that you are supposed to be aware of but until you learn the game they make as much sense as flying pigs. In conclusion, it is best to find that medium for any interactive media that has non-diegetic or diegetic elements. It is different for each occasion, for a first-person shooter the need for diegetic elements is acute, while in a complex game like World of Warcraft it is necessary. Websites are the same, and it would be logical and smart for developers to start thinking about how we can eliminate clutter, and turn it into a non-diegetic element for the user. </li>
                </ul>
                <ul>
                    <li> Content 4 </li>
                </ul>
                <ul>
                    <li> Content 5 </li>
                </ul>
                <ul>
                    <li> Content 6 </li>
                </ul>
</aside>

稍微浏览了一下您的页面，得到:Uncaught ReferenceError: i is not defined然后，我注意到，你没有在$('nav>li').click(function () {中声明i，不真正理解你的逻辑，因为它不起作用，但修复它。

您可以轻松地使用hide()。我更新了代码(星号行)，现在它可以工作了。只是一个插入示例来展示如何选择它，而不是优化代码。

$('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
相关文章：