Множественный переключатель на мобильной версии

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/

---

EDIT:

скрипку: http://jsfiddle.net/uuL2wyLk/2/

Эта скрипка показывает display:none; свойство применяется только тогда, когда ширина окна менее 500 пикселей. Когда страница загружена, скрипт проверяет, имеет ли .sub-navdisplay:none;, и если да, то позволит запустить скрипт аккордеона.

Это означает, что когда страница загружается на мобильный, свойство отображения будет присутствовать из-за медиа-запроса, что, в свою очередь, позволяет сценарий, но на рабочем столе свойство не будет присутствовать, а скрипт аккордеона не будет запустить.

Если вы видите новую скрипку и сжимаете результирующий фрагмент небольшим, а затем нажмите бег, вы увидите, что работает аккордеон. Если вы сделаете результирующий раздел более крупным и снова нажмете, аккордеон не будет гореть.

Вот скрипка снова: http://jsfiddle.net/uuL2wyLk/2/

---

EDIT 2:

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

Это так близко к поведению вы предлагаете.Вы завершаете свою личность в классе контента и вашем заголовке в классе переключения. Поэтому, когда вы нажимаете на дополнительный пункт меню, другой пункт меню остается открытым, автоматически закрывается.

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/