Вам не нужно добавлять дополнительный javascript к тому, что уже включено в опцию свертывания начальной загрузки. Вместо этого просто включите селекторы data-toggle и data-target в элементы списка меню так же, как вы это делаете с кнопкой переключения навигационной панели. Итак, для пункта меню "Товары" это будет выглядеть так
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Затем вам нужно будет повторить переключатели данных и целевые данные для каждого элемента меню.
РЕДАКТИРОВАТЬ!!!
Чтобы исправить проблемы с переполнением и мерцание в этом исправлении, я добавляю еще код, который исправит это, и по-прежнему не имеет дополнительного javascript. Вот новый код:
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Вот он работает http://jsfiddle.net/jaketaylor/84mqazgq/
Это сделает ваши переключатели и селекторы целей специфичными для размера экрана и устранит сбои в большом меню. Если у кого-то по-прежнему возникают проблемы с глюками, сообщите мне, и я найду решение. Благодарность
РЕДАКТИРОВАТЬ : в начальной загрузке v4.1.3 я не мог использовать видимые / скрытые классы. Вместо hidden-xs
использования d-none d-sm-block
и вместо visible-xs
использования d-block d-sm-none
.