Question

我正在尝试开发一个下拉数据切换开关，该开关可用于打开下拉菜单，但同时允许用户单击链接。

当前，只能通过右键单击“在新选项卡中打开”来打开链接。但是，即使浏览器正确识别了我的链接目标（即使在浏览器的左下角，我也可以看到目标网址），单击链接始终会打开下拉列表。

我已经尝试过拆分按钮，但是它们的布局不够灵活。

基本上，我需要一个带有两行的按钮（下拉键）。第一行是带有链接名和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 Reference - Event.stopPropagation()

如何在下拉数据切换上提供可点击的链接（到其他页面）？

1 个答案: