angularjs - 需要使用 css 技巧将元素放在前面

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

将此添加到您的 CSS:

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

但需要注意的是，快照内容在动画时是透明的。

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

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;
}