javascript - 删除移动断点内的切换

Question

希望有人能帮忙。

我有一个导航栏设置，类似于我们在 GMail、Facebook 等上看到的导航栏，带有用户头像按钮以及设置、帐户、注销等选项。我还有与头像图标内嵌的主要网站导航。

当在移动设备上查看屏幕时，导航栏会折叠，但我希望头像切换按钮消失，因此菜单显示如下:

<li><a href="#"><span class="glyphicon glyphicon-cloud-upload"></span> Upload</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Globe</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Favourite</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a></li>
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

这是 fiddle :http://jsfiddle.net/Z5Txw/

Answer 1

添加hidden-xs导航栏折叠时要隐藏的元素的类。更新 fiddle :http://jsfiddle.net/Z5Txw/3/ .

编辑: 我根据您的评论编辑了 fiddle ，添加了另一个带有 visible-xs 的 ul 来实现您想要的。现在看起来是这样:

<!-- Visible when navbar is collapsed -->
<ul class="nav navbar-nav visible-xs">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a>
        </li>
        <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a>
        </li>
        <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
        </li>
    </ul>

    <!-- Visible when navbar isn't collapsed. -->
    <ul class="nav navbar-nav navbar-right hidden-xs">
        <li class="avatar-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="http://placehold.it/30x30" height="30px" class="img-circle avatar" alt="Avatar">
            </a>

            <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a>
                </li>
                <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a>
                </li>
                <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
                </li>
            </ul>
        </li>
    </ul>