Javascript 移动版本上的多重切换_Javascript_Jquery_Html_Css

Javascript 移动版本上的多重切换

javascript jquery html css

Javascript 移动版本上的多重切换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,你好，我有一个页脚导航（桌面）与3 Ul，我想在移动版本上切换每个Ul，如何才能做到这一点？提前thx <footer class="footer"> <div class="wrapper"> <nav class="footer-navigat"> <ul> <li><h2>Title</h2></li> &

你好，我有一个页脚导航（桌面）与3 Ul，我想在移动版本上切换每个Ul，如何才能做到这一点？提前thx

   <footer class="footer">
     <div class="wrapper">
      <nav class="footer-navigat">

        <ul>
          <li><h2>Title</h2></li>
           <li><a href="#">prod1</a></li>
           <li><a href="#">prod2</a></li>
           <li><a href="#">prod3</a></li>
             <li><a href="#">prod2</a></li>
           <li><a href="#">prod3</a></li>
        </ul>
        <ul>
          <li><h2>Title 3</h2></li>
           <li><a href="#">prod1</a></li>
           <li><a href="#">prod2</a></li>
           <li><a href="#">prod3</a></li>
             <li><a href="#">prod2</a></li>
           <li><a href="#">prod3</a></li>
        </ul>
          <ul>
          <li><h2>Title 3</h2></li>
           <li><a href="#">prod1</a></li>
           <li><a href="#">prod2</a></li>
           <li><a href="#">prod3</a></li>
             <li><a href="#">prod2</a></li>
           <li><a href="#">prod3</a></li>
        </ul>
      </nav>
    </div>
  </footer>

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>



头衔







标题3







标题3

这是对您的问题的一个极其基本的回答

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

您需要重新构造html，以便在前面的代码中有一个子

ul

，如下所示：

<ul>
    <li class="clickme"><h2>Title</h2></li>
    <ul class="sub-nav">
        <li><a href="#">prod1</a></li>
        <li><a href="#">prod2</a></li>
        <li><a href="#">prod3</a></li>
         <li><a href="#">prod2</a></li>
        <li><a href="#">prod3</a></li>
    </ul>
</ul>

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

最后，以下jquery将允许您切换更改子导航显示属性的类：

$(document).ready(function() {
    var button = $('.clickme');
    var subnav = $('.sub-nav');

    button.on('click',function(){
       subnav.toggleClass('show-nav'); 
    });
});

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

这一切对你来说都是一团糟：

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

编辑：

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

小提琴：

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

此小提琴显示

显示：无属性仅在窗口宽度小于500px时应用。加载页面时，脚本将检查.sub nav
是否有显示：无，如果是，将允许运行手风琴脚本
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

这意味着，当页面加载到移动设备上时，由于媒体查询，显示属性将出现，这反过来又允许脚本，但在桌面上，该属性将不存在，并且手风琴脚本将不会运行
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

如果您看到新的小提琴，并缩小了结果部分，然后点击运行，您将看到手风琴的作品。如果将结果部分放大并再次点击run，则手风琴将不会启动
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

小提琴又来了：
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>


编辑2：
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

小提琴：
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

我已经更新了小提琴，允许多个菜单。我已经更改了html，以便
包含子导航以及单击按钮，如下所示：
<li>
    <h2 class="clickme">Title</h2>
    <ul class="sub-nav">
        <li><a href="#">prod1</a></li>
        <li><a href="#">prod2</a></li>
        <li><a href="#">prod3</a></li>
        <li><a href="#">prod2</a></li>
        <li><a href="#">prod3</a></li>
    </ul>
</li>

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

要了解实现此功能的所有代码，请参阅fiddle:
这与您建议的行为非常接近。将li包装在内容类中，将标题包装在切换类中。因此，当您单击一个辅助菜单项时，另一个打开的菜单项将自动关闭
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

HTML

    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

CSS:
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>

$(function() {
  $("li.content").hide();
  $("ul.navigation").delegate("li.toggle", "click", function() { 
  $(this).next().toggle("fast").siblings(".content").hide("fast");
  });
});

.toggle { color: blue; }
.content { border: slid 1px #ddd; padding: 5px; }

下面是一个类似行为的例子
你所说的切换是什么意思？也请公布你迄今为止所做的一切努力。。。！我想他想把每个列表都隐藏在手风琴里你有没有看过checkbox hack？Hexana，我知道checkbox hack，但是当我在桌面网站上时，菜单是经典的ul列表，只需在手机上用accordion.thx更改即可。但是使用这个$（“li.content”）.hide（）；所有内容都隐藏在每个大小上，我只想在确定的宽度上隐藏内容供评论，但问题是一样的，因为我只需要在移动设备上手风琴。如果使用媒体查询将显示：无应用到移动设备宽度处的.sub-nav，您可以使用jqueryif语句检查属性，然后允许使用accordio代码。看到这个链接：我已经更新了上面的答案。是的，我理解，这是一个很好的代码，但只有一个问题，如果我有2个或更多的ul，所有列表都是打开或关闭的。因此，如果我点击第一个ul列表，脚本将打开所有列表。我已经为您再次更新了答案you@Armando这解决了你的问题吗？
    <ul>
      <li class="toggle">Title 1</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
    <ul>
       <li class="toggle">Title 2</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
      <ul>
       <li class="toggle">Title 3</li>
       <li class="content"><a href="#">prod1</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
       <li class="content"><a href="#">prod2</a></li>
       <li class="content"><a href="#">prod3</a></li>
    </ul>
  </nav>
</div>