Bootstrap - свернуть боковую панель программно

#twitter-bootstrap

Вопрос:

То, что я хочу сделать, это свернуть боковую панель одним нажатием кнопки. Для достижения этого мне нужно было бы знать, «где» находится событие, которое автоматически сворачивает боковую панель, и как его запустить программно. Как вы можете видеть в этой скрипке, если вы измените размер вертикального обработчика влево, появится Dashboard пункт меню, а если вы измените его вправо, эта маленькая кнопка появится в правом углу.

**** РЕДАКТИРОВАТЬ ****

Посмотрев на css , я смог найти, где происходит событие: @media (min-width:768px) { ... } итак, когда ширина экрана составляет < 768 пикселей, боковая панель свернется и появится кнопка навигации. Как я могу выполнить это действие программно? Изображение объясняет поведение, которое я хочу:

введите описание изображения здесь

1. Итак, вы говорите, что хотите функциональность свернутой навигации на боковой панели?

2. Например: если моя боковая панель не свернута (как я сказал в приведенном выше примере изменения размера обработчика veritcal влево), я хотел бы нажать на кнопку и свернуть боковую панель, чтобы мое приложение имело полную ширину

Ответ №1:

Navbar Создается с использованием .collapse() функции Bootstrap.
Вы можете использовать любую из следующих команд:

 .collapse('toggle')
.collapse('show')
.collapse('hide')

С помощью JavaScript:

 <button id="ToggleNavScript" class="btn btn-primary btn-lg" >
    Toggle Nav JavaScript
</button>

 $("#ToggleNavScript").click(function() {
    $('.navbar-collapse').collapse('toggle');
});

С помощью HTML в любом другом месте страницы:

 <button id="ToggleNavAttr" class="btn btn-primary btn-lg" 
   data-toggle="collapse" data-target=".navbar-collapse" >
        Toggle Nav Attribute
</button>

Вот рабочая демонстрация в fiddle

1. Спасибо за ваш ответ, но это не совсем то, что я хотел.. Вместо свертывания nav bar я бы хотел свернуть side bar . Я предполагаю, что я здесь не совсем ясно выражаюсь, но я хочу иметь что-то вроде этого . Когда я нажимаю на стрелку слева, меню должно быть скрыто, кнопка навигации (эти 3 маленькие горизонтальные полосы) должна отображаться в правом углу, а содержимое моей страницы должно занимать всю ширину экрана

2. @lucasdc, можете ли вы создать простой рисунок в MS Paint с различными состояниями приложения и вашими визуальными ожиданиями и загрузить его в imgur. Мне немного сложно следовать вашему описанию.

Ответ №2:

Вы можете обратиться к этой ссылке W3School.

Это главная кнопка переключения:

 <button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo" aria-expanded="false">Simple collapsible</button>

Ниже приведен раздел, который вы хотите переключить:

 <div id="demo" class="collapse" aria-expanded="false" style="height: 0px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

Итак, вам просто нужно ‘переключить’ класс на вашу боковую панель div. и убедитесь, что он не содержит класс ‘in’, что означает, что он находится в состоянии расширения.