Question

我有一个单击一个glyphicon触发的下拉列表。 glyphicon具有ui-bootstrap工具提示，在鼠标输入/鼠标离开时触发。单击glyphicon时也会触发工具提示关闭，并显示下拉列表。

但是，一旦打开下拉列表，如果触发了鼠标输入，则会再次显示工具提示。我想在下拉列表打开时阻止鼠标输入触发工具提示。

glyphicon的html和下拉列表是：

<span class="" uib-dropdown-toggle>
    <span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
        tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
        ng-click="sortTooltipIsOpen = !sortTooltipIsOpen">
    </span>
</span>

<ul uib-dropdown-menu class="dropdown-menu-right">
    <li ng-repeat="s in sortDesc" ng-click="sortBy(s)"><a href="#">{{s}}</a></li>
</ul>

我创建了一个plnkr来准确显示它是如何工作的：http://plnkr.co/edit/aeOuJasEHFUH505o2L8T

任何想法如何做到这一点？

Answer 1

这是工作plnkr。我用过＆＃34; is-open＆＃34;用于检测下拉列表是否打开的属性。基于此，我已禁用/启用工具提示。我希望它有所帮助。

我已将 tooltip-enable =＆＃34;！isDropdownOpen＆＃34; 添加到工具提示， is-open =＆＃34; isDropdownOpen＆＃34; uib-dropdown。

<span class="" uib-dropdown is-open="isDropdownOpen">

        <span class="" uib-dropdown-toggle>

            <span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
              tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
              ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!isDropdownOpen" >
            </span>

        </span>

        <ul uib-dropdown-menu class="dropdown-menu-right">
            <li ng-repeat="s in sortDesc" ng-click="sortBy(s)"><a href="#">{{s}}</a></li>
        </ul>

UI Bootstrap - 如何在下拉列表打开时防止工具提示打开

1 个答案: