Адаптивное меню bootstrap для лендинг?

Question

[zefcoder]

Всем доброго времени ночи!
Подскажите пожалуйста(или если можете ткните куда копать) сделал лендинг на бутстрап, навигация при изменении ширины экрана до мобильных устройств превращается в "бутерброд" или по английски(collapse), но специфичная ситуация которую не получается решить.
На сайте используется навигация лишь для перехода по ссылкам-якорям с плавной анимацией, а когда нажимаю на мобильном устройстве на ссылку она остается в раскрытом виде(что занимает очень много места т.к. меню фиксированное сверху).
Отсюда задача:
1. По нажатию на бутерброд разворачивается меню - готово.
2. По нажатию на ссылку переход на нужный контент сайта сворачивается обратно в бутерброд.

Даю код(но если кто подскажет уже готовый плагин, я бы воспользовался им):

<nav id="navigation" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
                <button class="navbar-toggle" type="button" data-target="#navbar-collapse" data-toggle="collapse">
                    <span class="sr-only">Меню</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">
                    <img id="logo" src="images/logo.png" alt="Логотип">
                </a>
            <div id="navbar-collapse" class="collapse navbar-collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="#buy">Преимущества</a></li>
                    <li><a href="#assortment">Ассортимент</a></li>
                    <li><a href="#price">Цены</a></li>
                    <li><a href="#profit">Заработок</a></li>
                    <li><a href="#guarantees">Гарантии</a></li>
                    <li><a href="#reviews">Отзывы</a></li>
                    <li><a href="#contact">Контакты</a></li>
                </ul>
            </div>
        </div>
    </nav>

Также пробовал решить проблему с закрытием меню при клике, но повторное нажатие на бутерброд не срабатывает...

$(function () {
    var menu = $('nav ul');
    if (!$('nav ul li a').on('click', function (e) {
            menu.slideToggle();
        })) {

    }
});

Заранее благодарен. Извините, если плохо раскрыл суть вопроса.

Answer 1

[zefcoder]

Народ сам нашел в гугле сделав запрос на английском.
Если кому понадобиться решение:

$(function () {
    var menu = $('nav ul');
    $('.nav a').on('click', function(){
        $('.navbar-toggle').click()
    });
});

Answer 2

[automatik]

Решение не совсем чистое. В вашем случае меню на больших экранах может плющить после того, как пощелкаете по адаптивной версии и развернете экран, т.к. у него останется событие $('.navbar-toggle').click() от адаптивной версии. Поэтому лучше добавить проверку на размер экрана и отвязывать событие, если размер экрана стал больше.

$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() < 768) {            
            $('.nav a').on('click.toggle-nav', function(){
                $('.navbar-toggle').click()
            });
        }
        else {
            $('.nav a').off('click.toggle-nav')
        }
    }).resize();
});