Question

我有一个UI要求，用户需要能够点击元素，显示其选项，选项是复选框输入。

所以，选择＆＃39;允许多个复选框输入的元素。

               <div class="select-custom" ng-click="selectToggle = !selectToggle">
                    <div ng-show="all(x)">All Options<span class="arr"></span></div>
                    <div ng-show="!all(x) && !notAllowed(x)">Selected Options<span class="arr"></span></div>
                    <div ng-show="notAllowed(x)">No Options Selected<span class="arr"></span></div>
                </div>
                <ul class="list-unstyled select-custom-options" ng-show="selectToggle">
                    <li ng-repeat="option in options">
                        <input type="checkbox" value="{{option.Name}}" ng-model="option.Allow">{{option.Name}}
                    </li>
                </ul>

div的样式类似于选择输入，ul包含选项。一切都很好，除了你需要点击div以隐藏ul。通常，如果在选项外单击，则选择元素将关闭。

有关如何将此行为添加到此类元素的建议？

Answer 1

    $(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

来自This answer

将container.hide编辑为类似

的内容

container.attr('ng-show', 'false')

我认为这会奏效;）

Div的行为类似于使用Angular的Select下拉列表

1 个答案: