javascript - 移动版本上的多个切换

Question

您好，我有一个带有 3 个 ul 的页脚导航(适用于桌面)，我想在移动版本上的切换中转换每个 ul，该怎么做？ 提前谢谢

   <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>

Answer 1

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

您需要重组您的 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>

然后，如果您将以下内容包装在媒体查询中，以便它们仅在您的移动设备宽度上启动，它们将隐藏您的子导航:

.subnav {display: none;}
.show-nav {display:block;}

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

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

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

这一切都在为您摆弄:http://jsfiddle.net/uuL2wyLk/

---

编辑:

fiddle :http://jsfiddle.net/uuL2wyLk/2/

这个 fiddle 显示 display:none;属性仅在窗口宽度小于 500px 时应用。加载页面时，脚本将检查 .sub-nav 是否有display:none; ，如果是，将允许 Accordion 脚本运行。

这意味着当页面在移动设备上加载时，由于媒体查询，显示属性将存在，​​这反过来又允许脚本，但在桌面上，该属性将不存在，并且 Accordion 脚本将不会运行。

如果您看到新的 fiddle 并将结果部分缩小，然后点击运行，您将看到 Accordion 可以工作。如果您将结果部分放大并再次单击“运行”， Accordion 将不会触发。

这又是 fiddle :http://jsfiddle.net/uuL2wyLk/2/

---

编辑2:

fiddle :http://jsfiddle.net/uuL2wyLk/3/

我已经更新了 fiddle 以允许多个菜单。我已经更改了 html，以便 <li>包含子导航以及单击按钮，如下所示:

<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>

使用 jquery，您可以使其在单击标题时，它将找到同级 .sub-nav并应用.shownav到它。下面是代码片段:

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

有关实现此功能的所有代码，请参阅 fiddle :http://jsfiddle.net/uuL2wyLk/3/