Как через Bootstrap реализовать dropdown на мобильных устройствах?

Question

[BarneyGumble]

Добрый вечер

Имеется обычное меню, реализованное по нормам Bootstrap

<div class="container topnavigation">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div><!--/.navbar-header -->

        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
               <li><a href="/sale">Распродажа</a></li>
               <li><a href="/new">Новинки</a></li>
               <li>
                   <a href="/catalog">Каталог</a>
                   <ul class="submenu">
                       <li><a href="/category/33">Верхняя одежда</a></li>
                       <li><a href="/category/34">Футболки</a></li>
                       <li><a href="/category/35">Штаны</a></li>
                   </ul>
               </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div><!--/.container.topnavigation -->

При просмотре с мобильного устройства, после открытия "сендвича" и нажатия на пункт меню "Каталог", происходит открытие выпадающего меню и сразу же переход по ссылке "/catalog", что, само собой, не особо правильно и удобно. Человек не успел ознакомиться с содержимым dropdown меню, а его уже перенаправили куда-то.

Как сделать так, чтобы при нажатии на "Каталог", происходило ТОЛЬКО открытие выпадающего меню? А если человек всё же хочет именно на страницу "/catalog" попасть, а не на те, что представлены в dropdown меню, то при повторном клике на "Каталог" он бы смог перейти туда?

Answer 1

[Леван Какубава]

To keep URLs intact with link buttons, use the data-target attribute instead of href="#".

dropdowns