Блог

Главная - Вопросы по программированию - удалить переключатель в мобильной точке останова

удалить переключатель в мобильной точке останова

#javascript #jquery #html #css #twitter-bootstrap

#javascript #jquery #HTML #css #twitter-bootstrap

Вопрос:

Надеюсь, кто-нибудь может помочь с этим.

У меня настроена панель навигации, аналогичная тем, которые мы видим в 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>

Вот скрипка: http://jsfiddle.net/Z5Txw /

Ответ №1:

Добавьте hidden-xs класс к элементу, который вы хотите скрыть, когда панель навигации свернута. Обновленная скрипка: http://jsfiddle.net/Z5Txw/3 /.

Редактировать: я отредактировал скрипку на основе вашего комментария, добавив еще один ul с visible-xs , чтобы достичь того, чего вы хотите. Теперь это выглядит так:

 <!-- 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>

Комментарии:

1. Я по-прежнему хочу, чтобы элементы списка аватаров (я, Настройка, редактирование профиля, выход из системы) отображались при просмотре на мобильном устройстве, просто пользователю не нужно нажимать на значок аватара, поскольку основная панель навигации и параметры аватара перечислены в одном меню (если это имеет смысл)

2. Эй, @JT1, соответствует ли мой обновленный ответ вашим потребностям сейчас? Если это так, подумайте о том, чтобы пометить его как принятый.

Ответ №2:

Вы можете использовать классы hidden-xs и visible-xs для создания разных меню. Для основной навигации и меню навигации по аватарам используйте hidden-xs и создайте другое меню для мобильного устройства с классом visible-xs. Вот так: jsfiddle.net/Z5Txw/2/