如何將垂直菜單轉換為手風琴菜單

Question

我正在嘗試構建一個響應式選項卡菜單，但是當菜單進入垂直視圖時，我想嘗試一種類似菜單的手風琴（例如，選項卡之間的內容），但是我不知道如何在沒有它的情況下進行操作失去響應能力。

的HTML

<h1>Responsive Tabs</h1>

<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Test1</a></li>
<li><a href="#tab2">Test2</a></li>
<li><a href="#tab3">Test3</a></li>
</ul>

<div class="tabContainer">
<div id="tab1" class="tabContent">
  Test1
</div>

<div id="tab2" class="tabContent">
  Test2
</div>

<div id="tab3" class="tabContent">
 Test3
</div>    

的CSS

    body {
font-family: Arial, sans-serif;
}



 div.tabBox {
width:99.9%;
float:left;
overflow: visible;

}

 div.tabBox h3 {
  padding:20px 0px;
 }


  ul.tabs {
  margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px; 
  width:99.9%;
 }

 ul.tabs li {
 float: left;
 margin: 0;
padding: 0;
height: 32px; 
line-height: 32px; 
margin-bottom: -1px; 
overflow: hidden;
position: relative;
 }

 ul.tabs li a {
 display: block;
 padding: 0 5px;
 outline: none;
 background:none;
 }


  .tabContainer {  
   border-top: none;
   overflow: hidden;
  clear: both;
  float: left;
  width:99.9%;
 min-height:300px;
 margin-bottom:10px;
 }

  .tabContent {
 padding: 20px;
  }

 .tabContent h3 {
 padding:0px;
 }

 /**** TABS STYLES ****/

 div.tabBox h3 {
 }


 ul.tabs {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
}

 ul.tabs li {

  }

  ul.tabs li a {
 background:#eee;
 text-decoration: none;
 font-size: 11px;
 color: #000;
 outline: none;
 border: 1px solid #ccc;
 border-left: none;
 border-top-left-radius:5px;
 -moz-border-top-left-radius:5px;
 -webkit-border-top-left-radius:5px;
 border-top-right-radius:5px;
 -moz-border-top-right-radius:5px;
 -webkit-border-top-right-radius:5px;
 }

  ul.tabs li a:hover {
  background: #eee;
  }

   ul.tabs li.active {
  border-bottom:1px solid #fff;
  }

  ul.tabs li.active a, ul.tabs li.active a:hover  {  
  background: #fff;
  }

 div.tabContainer {
 border-bottom:1px solid #ccc;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 background:#fff;
  } 

      @media only screen and (max-width: 767px) {

div.tabBox {
    border: 1px solid #ccc;
}

ul.tabs {
height: auto;
display: block;
width:100%;
border-left:0px;
}

ul.tabs li {
    width:100%;
}

ul.tabs li a {
    border-top-left-radius:0px;
    -moz-border-top-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    border-top-right-radius:0px;
    -moz-border-top-right-radius:0px;
    -webkit-border-top-right-radius:0px;    
    border:0px;
}

div.tabContainer {
    border: 0px;
}

 }

這是小提琴http://jsfiddle.net/Jnewguy/5B5KJ/

有任何提示或想法嗎？

Answer 1

有許多不同的選擇……這取決於您希望如何解決此問題。

1）為響應版本添加更多html。

<a href="#tab1">Test1</a>   
<div id="tab1" class="tabContent">
  Test1
</div>
<a href="#tab2">Test2</a>
<div id="tab2" class="tabContent">
  Test2
</div>
<a href="#tab3">Test3</a>
<div id="tab3" class="tabContent">
 Test3
</div>  

在每個標簽前添加標簽鏈接，並僅在移動設備上顯示它們。 您可以隱藏默認的代碼，並使用適當的js設置新代碼的樣式。

2）您可以應用相同的做法，但是使用JS克隆選項卡鏈接，並在選項卡之前添加每個鏈接。

$('.tabs li a').each(function(){
    var $self = $(this);
    var href = $self.attr('href');
    var clone = $self.clone();
    $(clone).insertBefore($(href));
})

3）您可以將內容附加到ul>li結構內部，但是每次退出/進入斷點時必須將其移動

$('.tabContent').each(function(e){
    var $self = $(this);
    $('.tabs li').eq(e).append($self);
})

還有一些其他選擇，目前我還無法想到...

我不知道你為什么要給他指出一個菜單選項問題，因為他的問題是他只能將他當前的垂直方向轉換為僅響應式的菜單...