Question

请找到我的plunker。这是“过滤子菜单”下面的项目。没有完全可见，任何人都可以帮助我把它带到前面吗？

我的子菜单的HTML代码：

<li class="dropdown-submenu">
    <a href>Filter Sub Menu</a> 
    <ul class="dropdown-menu">
        <li ng-repeat="filt in savedFilterList "> 
            <a href ng-click="getDataBasedonFilter(filt)"> {{filt.filter_name}}</a> 
        </li>
    </ul>
</li>

Answer 1

您可以设置

.snap-drawer-left {
  overflow: visible;
}

让他们出现。您可以找到一个有效的示例here

Answer 2

在angular-snap.css中，类.snap-drawer-left需要定义为：

.snap-drawer-left {
    left: 0;
    overflow: visible;
    z-index: 3;
}

您需要覆盖溢出和z索引，但是您需要比.snap-content更高的z索引，即2。

Answer 3

将此添加到您的css：

.snapjs-left .snap-drawer-left {
    overflow:visible;
    z-index:5;
}

但有一点需要注意，在制作动画时，快照内容是透明的。

要解决此问题，您可以在动画后使用snap.js＆＃39;添加上面的属性。事件回调。

app.controller('MainCtrl', function($scope, snapRemote, SNAP_VERSION) {
    $scope.snapVersion = SNAP_VERSION.full;
    $scope.name = 'World';

    snapRemote.getSnapper().then(function(snapper) {

        var snapleft = document.getElementsByClassName("snap-drawer-left");
        snapleft = angular.element(snapleft)

        snapper.on('open', function() {
            snapleft.addClass('expanded');
        });
        snapper.on('close', function(){
            snapleft.removeClass('expanded');
        });
    });
    ...
    ...

而不是上面的css，请使用：

.snap-drawer-left.expanded {
    overflow:visible;
    z-index:5;
}

需要使用css技巧将物品带到前面

3 个答案: