（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标签标题作为下拉菜单工作

回答

相关问题