Как предоставить кликабельную ссылку (на какую-то другую страницу) на dropdown-data-toggle?

Question

Я пытаюсь разработать раскрывающийся переключатель данных, который можно использовать для открытия выпадающего меню, но одновременно позволяет пользователю щелкнуть ссылку.

В настоящее время ссылку можно открыть только с помощью щелчка правой кнопкой мыши «открыть в новой вкладке». Однако щелчок левой кнопкой мыши по ссылке всегда открывает раскрывающийся список, даже если браузер правильно распознает цель моей ссылки (я вижу целевой URL в левом нижнем углу моего браузера).

Я уже пробовал разделить кнопки, но их расположение недостаточно гибкое.

В принципе, мне нужна одна кнопка (выпадающий-переключатель) с двумя строками. Первая строка - это якорь с именем ссылки и URL. Вторая строка - это фактическая метка кнопки. (Справочная информация. Когда пользователь выбирает новый элемент в раскрывающемся списке, отображаемая ссылка и метка кнопки обновляются под углом.)

<div class="btn dropdown-toggle" data-toggle="dropdown">
    <a href="{{someUrl}}" class="button-link">
        {{link name}}
    </a>
    <div class="button-label">
        {{label}}
    </div>
</div>
<ul class="dropdown-menu">
    <li ng-repeat="item in items"> item </li>
</ul>

Ожидаемый результат: * Если пользователь нажимает на ссылку, я хотел бы загрузить связанную страницу. * Если пользователь нажимает на кнопку в другом месте (независимо от того, является ли она первой или второй строкой), я хотел бы открыть раскрывающееся меню.

Answer 1

Однако щелчок левой кнопкой мыши по ссылке всегда открывает раскрывающийся список,

Для тега <a> требуется обработчик клика, который останавливает распространение клика:

<div class="btn dropdown-toggle" data-toggle="dropdown">
    <a href="{{someUrl}}" class="button-link" ng-click="$event.stopPropagation()">
        {{linkName}}
    </a>
    <div class="button-label">
        {{label}}
    </div>
</div>

Это предотвратит всплытие клика по элементу <div>, открывающему раскрывающийся список.

Для получения дополнительной информации см.

• Справочник по MDN Web API - Event.stopPropagation ()