如何判断导航栏是否折叠以切换导航栏列表中的项目答案

【问题标题】：How to tell if the navbar is collapsed in order to toggle items in the navbar list如何判断导航栏是否折叠以切换导航栏列表中的项目
【发布时间】：2014-06-27 20:59:58
【问题描述】：

我想：

显示图像 - 如果菜单已扩展
显示文本 - 如果菜单折叠（当“3 行按钮”出现时）

这是我的代码：

<nav class="navbar navbar-idebaca navbar-fixed-bottom">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" 
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="img/iebaca.png"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <img ng-show="somethingt to catch if the menu is collapsed"
                     src="img/button-aree.png">
                <a id="areelink" href="#" 
                   ng-hide="somethingt to catch if the menu is collapsed" 
                   ng-click="sendmessage('')">Aree</a>
            </li>
        </ul>
    </div>
</nav>

【问题讨论】：

display an image if the menu is "extended " -- 你的意思是当菜单打开并且菜单导航可见时？还是您想在不同的屏幕尺寸上获得不同的行为？
我正在尝试在不同的屏幕尺寸上获得不同的行为！

标签： jquery css angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我想你想要 bootstrap 的 responsive utility classes。

hidden-sm 类将隐藏小屏幕上的元素。

visible-sm-block、visible-sm-inline、visible-sm-inline-block 类将仅在小屏幕上显示一个元素。

【讨论】：

我试过了：
Aree

只能这样工作：

Aree

【解决方案2】：

Bootstrap 将所有内容都包含在标准 CSS 中以完成所有操作，如果您查看以下内容：http://getbootstrap.com/components/#navbar-default 它有一个很好的演示如何做到这一点，我建议从这个开始，然后修改它显示您想要的内容。

当屏幕尺寸超过 768 像素时，navbar-toggle 启动：

@media (min-width: 768px)
.navbar-toggle {
  display: none;
}

然后您可以使用 collapse 和 navbar-collapse 来控制更大显示器的展开模式。：

.collapse {
  display: none;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
  display: block!important;
  height: auto!important;
  padding-bottom: 0;
  overflow: visible!important;
}

【讨论】：