Javascript 隐藏导航的高级jquery循环

Javascript 隐藏导航的高级jquery循环,javascript,jquery,html,Javascript,Jquery,Html,所以我怀疑这是高级jquery,但对我来说,这是因为我本周才真正了解它。我写了我需要的所有东西,我唯一的问题是,我知道这是因为我对jquery是新手,但是当你点击菜单,然后点击任何一个导航选项,然后返回,它并没有隐藏内容,或者在内容存在时隐藏导航,即使我写了它,它也应该这样做(它只工作一次,因为我是新来的,我知道这就是为什么,我的语法有问题)。有什么建议吗 HTML $(文档).ready(函数(){ //$('ul:first').hide(); //$('ul li').hide(); $

所以我怀疑这是高级jquery,但对我来说,这是因为我本周才真正了解它。我写了我需要的所有东西,我唯一的问题是,我知道这是因为我对jquery是新手,但是当你点击菜单,然后点击任何一个导航选项,然后返回,它并没有隐藏内容,或者在内容存在时隐藏导航,即使我写了它,它也应该这样做(它只工作一次,因为我是新来的,我知道这就是为什么,我的语法有问题)。有什么建议吗

HTML


$(文档).ready(函数(){
//$('ul:first').hide();
//$('ul li').hide();
$('nav>li').hide();
$('ul').hide();
$('h2').hide();
/*('h1>')。单击(函数(事件){
$('nav>ulli:hidden')。每个(函数(i){
$('nav>li').show();
$('h1').hide();
美元(此).delay(i*600).fadeIn(200);
});
$('nav>ulli:visible')。每个(功能(i){
$('h1').hide();
});*/
$('a.btnDown')。单击(函数(){
$('body').css('background','tomato');
$('nav>ulli:hidden')。每个(函数(i){
//$('nav>h1')。淡出(300);
//美元('nav>ul')。法代因(200);
$('h1').hide();
$('nav>ul')。延迟(i*600)。fadeIn(200);
返回false;
});
});//关闭a.btnDown
$('nav>li')。单击(函数(){
$('nav>ulli:visible')。每个(函数(i){
$('h1').show();
$('nav>li').hide();
$('ul li').hide();
//clearTimeout(fadeTimeout);
$('nav>li')。延迟(i*600)。衰减(200);
})//i
返回false;
});//关闭a.btnDown
//所有内容元素
var$suls=$('body>aside>ul');
var$as=$('a.contentDown')。单击(函数(){
$('h2').show();
变量$smL=$('h2');
$smL.animate({
左:300})
//把导航移到一边去
var$nav=$('.navBar');
$nav.animate({
右:300})
//将菜单移到一边
变量$menu=$('.menu');
$menu.animate({
底部:300})
//隐藏可见内容项
$suls.filter(':visible').hide();
//将内容项显示在与单击的内容相同的位置
$suls.eq($as.index(this)).fadeIn(500);
返回false;
});//关闭
$('a.bck')。单击(函数(){
变量$aAside=$('aside');
$aAside.animate({
左:300})
变量$smL=$('h2');
$smL.animate({
左:-300})
//将导航移回正轨
var$nav=$('.navBar');
$nav.animate({
左:10})
返回false;
});//关闭bck单击
});//关闭。就绪()
    • 从我记事起,互动媒体就已经成为我生活的一部分。我一直对任何形式的媒体都很着迷,包括电视、视频游戏、手持游戏或网站。然而,在上学学习互动媒体之前,我从未注意到真正影响用户体验的小事情。其中之一就是em尤其是diegetic元素。diegetic元素是媒体中只有用户知道的对象。例如,在视频游戏中,diegetic元素是您在屏幕一侧看到的项目,告知您还有多少生命值或弹药。这些是必要的组件,用于告诉玩家r可能是他们下一个目标的目标,或者如果你周围有敌人。我们也接触到了与diegetic元素相反的“非diegetic”元素。非diegetic元素是互动中应该存在的项目。这是一种将diegetic元素实现到你所创造的世界空间的方法例如,非diegetic元素是放置在枪上的弹药条,而不是屏幕侧面的静态条。今天交互媒体中使用的一些模式包括大多数diegetic元素,这些元素一度是diegetic,但试图将其转换为非diegetic元素
    • 人们这样做的一种方式是在世界上扔一些玩家相信他们应该在那里的元素。与其扔一个有你的枪弹药和手榴弹数量的边栏,不如把一个游戏放在现代,我们将有技术可以把这些信息放在枪上,这是很有意义的大量使用非死亡元素损害玩家健康的最好例子。较老的游戏会有一个健康栏,但较现代的游戏大多会有一个“休克”说明屏幕可能变红的位置,或者你的播放机在受到攻击时开始失去正常行为的能力。这是否意味着我们应该完全停止使用diegetic元素?这是任何形式的互动媒体中的任何人都应该问自己的问题。问题是,你可能会有太多的非diegetic元素,这会导致d迷惑用户,而不是帮助他们,这是最初的意图。居民邪恶收到了很多严厉的批评,因为他们缺乏diegetic在场帮助玩家完成游戏。用户很难根据他们的健康系统来判断角色何时死亡。如果你受到伤害,你的角色将产生预感结束,但不清楚你受到了多大的伤害。用户经常会死亡
    • 不知道你是否应该死,而不是
      <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>
      
      $('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