（Mobile View）如何使UI標籤標題作爲下拉菜單工作

如何使UI引導程序現有標籤標題部分在移動視圖中的下拉列表中。（Mobile View）如何使UI標籤標題作爲下拉菜單工作

HTML：

<div> 
<div ng-controller="TabsDemoCtrl"> 
    <hr /> 
    <tabset justified="true"> 
     <tab ng-repeat="tab in tabs" heading="{{tab.title}}"> 
     <div class="tab-content"> 
     {{tab.content}} 
     </div></tab> 
    </tabset> 
    <hr /> 

</div>

CSS：

.tab-content { 
     text-align: center; 
     background-color: #eef0f1; 
     padding-top: 35px; 
     font-weight: 700; 
    }

JS小提琴鏈接：

UI Tab Heading JS Fiddle

目前的UI選項卡VI ew在手機視圖中改變爲垂直線（我如何破解當前的UI選項卡使其掉落（僅在移動視圖中）

來源

2016-02-18 user2936008

這很簡單。

您只需要在選項卡元素旁邊並排顯示下拉元素，並根據視口大小，您可以在下拉列表的可見性（在移動設備上可見並在其他情況下消失）之間切換。

HTML

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#">Home</a></li> 
    <li class="dropdown"> 
    <a class="dropdown-toggle inmobile" data-toggle="dropdown" href="#">Menu 1 
    <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Submenu 1-1</a></li> 
     <li><a href="#">Submenu 1-2</a></li> 
     <li><a href="#">Submenu 1-3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
</ul>

CSS

.inmobile { 
    display: none !important; 
} 

@media only screen and (max-width: 480px) { 
    .inmobile { 
     display: block !important; 
    } 
}

你只需要添加一個類說.inmobile到dropdown-toggle錨標記，並使用媒體查詢來定位元素（整個下拉將通過切換一個錨標籤來隱藏/顯示）。

Here is the Fiddle

來源

2016-02-18 22:29:09

我想下拉（將展開和摺疊）不是手風琴，內容是下拉 – user2936008

好之外..你想在下拉選項，然後什麼？ –

我只想知道如果我可以使用相同的選項卡並將它們顯示爲下拉菜單，我實際上正在考慮使用ng-hide和css屬性顯示：無與媒體查詢。 1）點擊活動選項卡時，應該在下拉選項卡中顯示其他兩個選項卡，當我選擇第二選項卡時，應該隱藏另外兩個選項卡並顯示活動選項卡... – user2936008

（Mobile View）如何使UI標籤標題作爲下拉菜單工作

回答

相關問題