Question

我有一个按钮。如果我单击该按钮，将在导航栏中打开一个弹出窗口。我正在为此使用ui-bootstrap。

如果我在弹出窗口之外单击，则不会关闭。

我写了window.onclick函数来实现这一点。这是工作。
但是我的问题是，如果我单击按钮，弹出窗口将打开。如果我在下拉列表中选择任何值，则将在该弹出窗口的上方打开另一个弹出窗口。
因此，如果我在第二个下拉列表中选择任何dropdwon值，则第一个下拉列表会自动关闭。
我需要的是，当我单击按钮时，下拉列表应该打开。如果我在下拉菜单外部单击，则关闭。
如果我从下拉列表中选择任何值，则下拉列表应该稳定。它不应该熄灭。只有当我在该时间以外单击时，它才应该进入。

<button id="btn-append-to-body" type="button" class="btn btn-primary" ng-show="showFilterBtn" ng-click="showDropdown($event)">
<img src="assets/images/filterIcon.png">&nbsp&nbspFilter <span class="caret"></span>
</button>
<li class="nav-item dropdown">
  <div class="dropdown-menu">
    <div class="dropdown-item" ng-repeat="filter in filters">
      <div>{{filter.filterObject}}</div>
    </div>
  </div>
</li>

window.onclick = function() {
   $(".dropdown-menu").hide();
}

如果我单击按钮，则下拉列表不应消失。

Answer 1

这是您的操作方式，这也不是理想的操作方式，因为您提供的数据很少，所以我只能想到这种修复方法：）

Pjax::begin();    
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        'tableOptions' => [
            'class' => 'table table-striped table-bordered table-advance table-hover'
        ],
        'layout' => "{items}\n{pager}\n{summary}",
        'filterModel' => $searchModel,
        'columns' => [
            [
                'class' => 'yii\grid\SerialColumn'
            ],
            [
                'class' => 'common\grid\ActionColumn',
                'template' => '{add_custom} {list_custom}',
                'header' => 'Outlets',
                'headerOptions' => [
                    'style' => 'width:175px; text-align:center'
                ],
                'contentOptions' => [
                    'style' => 'width:175px; text-align:center'
                ],
                'buttons' => [
                    'add_custom' => function ($url, $model, $key) {
                        return Html::a(Html::tag('i', null, [ 'class' => 'fa fa-plus' ]) . ' Add', 
                            [ '/users/outlets/create/' . $model->id ], 
                            [ 'class' => 'btn btn-xs green-sharp', 'style' => 'padding:3px 8px 3px 4px' ]);
                    },
                    'list_custom' => function ($url, $model, $key) {
                        return Html::a(Html::tag('i', null, [ 'class' => 'fa fa-list-ul']) . ' List ( ' . $model::getOuletsCount( $model->id ) . ' )', 
                            ['/users/outlets/list/' . $model->id], 
                            ['class' => 'btn btn-xs blue-dark','style' => 'padding:3px 8px 3px 4px']
                        );
                    }
                ]
            ],
    ]);

    Pjax::end();

编辑1

只需添加一个父div并为您不想关闭的下拉列表父母保留一个唯一的类假设类名是window.addEventListener("click", function(event) { if (!$(event.target).hasClass('dropdown-menu') &&!$(event.target).parents().hasClass('dropdown-menu')) { $(".dropdown-menu").hide(); } });

然后像这样编辑条件

dropdown-select

Answer 2

您应该将扩展添加到jquery库，然后添加此脚本，因为您使用的是javascript

    <script>
        $( document ).ready(function() {
            $(".dropdown-menu").hide();
        });
    </script>

外部点击在angularjs中不起作用

2 个答案: