Question

你好我有一个带有3个UI的页脚导航（用于桌面），我希望在移动版本的切换中转换每个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>

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/

编辑：

小提琴：http://jsfiddle.net/uuL2wyLk/2/

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

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

如果您看到新的小提琴并将结果部分缩小，然后点击运行，您将看到手风琴正常工作。如果你把结果部分放大并再次点击跑，手风琴将不会发射。

这是小提琴：http://jsfiddle.net/uuL2wyLk/2/

编辑2：

小提琴：http://jsfiddle.net/uuL2wyLk/3/

我更新了小提琴以允许多个菜单。我更改了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'); 
});

对于使这项工作的所有代码，请参阅小提琴：http://jsfiddle.net/uuL2wyLk/3/

Answer 2

这与您建议的行为非常接近。您将li包含在内容类中，并将标题包含在切换类中。因此，当您单击辅助菜单项时，另一个打开的菜单项会自动关闭。

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

<强> JQUERY：

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

<强> CSS：

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

以下是具有类似行为http://jsfiddle.net/nick_craver/K6TSv/1/

的示例小提琴

移动版本上的多个切换

2 个答案: