javascript - 当子容器 div 处于事件状态时，如何禁用父背景 div？

Question

我想禁用包含数据网格的父背景div。在网格上有一些选项，例如将数据排序和导出到 csv/pdf。此外，在此网格上有一个过滤器按钮，单击该按钮(通过 ng-click= xyz();)会出现一个过滤器叠加层。这是父级 div 内的子容器 div。当此过滤器覆盖 div 打开时，我想禁用父网格 div，即禁用父 div 上的排序和导出以及任何其他功能。

有任何帮助吗？我的整个元素都在 angular js 中。带有演示的示例会很棒!

在 agg.service.js 中

angular.module('ccar14a.common').factory('ccar14a.common.AggService', [
'ccar14a.common.Config',
'StatusService',
'ccar14a.common.TcnService',
'ccar14a.common.PivotService',
'ccar14a.common.GridConfigService',
'$timeout',
function(Config, StatusService, TcnService, PivotService, GridConfigService, $timeout) {

    var service = { 
            openFilterOverlay: function() {
            console.log("Toggle Filter overlay00");

           var filteroverlay = angular.element(".filter-overlay");

           if(filteroverlay.hasClass('open')) {

               filteroverlay.removeClass('open');
           } else {
               filteroverlay.addClass('open');
           }
            angular.element('.tooltip').hide();
        },
   };

    return service;
   }]);

在index.html

<div class="col-md-12 main-view" ng-controller="ccar14a.common.drillDownController">

<div class="ddt-container">
    <h2>
    <span>
        {{config.title}} v{{config.version}}.
        <a href="" ng-click="getInitialFilter(true)"
                    ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
            {{config.initialTitle}}</a>
        <!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
        <!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
    </span>
    <div class="ddt-links pull-right">
        <a href="" ng-click="about()">
            About</a>
        <a href="" ng-click="help()">
            Help</a>
    </div>
</h2>
</div>

<!--div container for filter overlay starts here-->

<div class="container-fluid ddt-container" ng-controller="ccar14a.common.drillDownController" id="ccar14a">
    <h2 ng-hide="true" class="remove">
    <span>
        {{config.title}} v{{config.version}}.
        <a href="" ng-click="getInitialFilter(true)"
                    ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
            {{config.initialTitle}}</a>
        <!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
        <!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
    </span>
    <div class="ddt-links pull-right">
        <a href="" ng-click="about()">
            About</a>
        <a href="" ng-click="help()">
            Help</a>
    </div>
</h2>


    <div class="ddt-sidebar filter-overlay col-md-2">

        <div class="row">
            <div class="col-md-6">
                <div class="form-group ddt-filter-box-group">
                    <select class="form-control ddt-filter-box-fld" ng-model="savedFilter" ng-change="aggService.submitScenario(filter)">
                        <option value="">My Saved Filters</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6">
                <button type="button" class="filter-close close-filter pull-right" ng-click="aggService.openFilterOverlay()"><i class="glyphicon glyphicon-remove filter-close"></i></button>

            </div>
        </div>

        <!--The code continues having several filter box  -->
 <div class="ddt-content col-xs-12" ng-class="{'col-md-10': !showControlPanel, 'col-xs-12' : !showControlPanel}">
            <div class="ddt-grid" ng-controller="ccar14a.common.AggController" ng-show="config.displaySummaryGrid">
                <ng-include src="'templates/summaryGrid.html' | embedUrl"></ng-include>
</div>

在summaryGrid.html

中

<div class="grid-header">

<button type="button" class="btn btn-sm ddt-btn-medium pull-left" ng-show="true" ng-click="aggService.openFilterOverlay();">
    <i class="glyphicon glyphicon-filter" tooltip="Open Filter" tooltip-placement="right"></i>
</button>
<!-- Code for other functionalities continues-->
</div>

在styles.css

.filter-overlay {
position: absolute;
left: -500px;
background: #EEE;
transition: 1s;
z-index: 1000;
box-shadow: 5px 5px 10px 3px #aaaaaa;
height: 100%;
min-width:365px;
overflow-y: auto;
 }

.filter-overlay.open {
transition: 1s;
left: 0;
}

.filter-overlay .row {
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-botton: 12px;}

.container-fluid {
background-color: #F0F3F6;
height: 100%;
padding: 18px;}

.container-fluid .row{
margin-left: 0;
margin-right: 0;}

.ddt-content {
padding-left: 0;
padding-right: 0;
background-color: white;}

.tab-content > .tab-pane {
display: none;}

.tab-content > .active {
display: block;}

Answer 1

如果禁用父元素，那么显然子元素也将被禁用。您可以将这两个 div 作为 sibling 放置，并根据元素的可见性分别隐藏它们，而不是让它们成为父元素和子元素。