javascript - 在元素组的列表组和div之间切换

我有一个HTML页面，上半部分是静态的，下半部分是动态的。在此页面的移动视图中，下半部分是一个列表组，每个项目代表一个类别。

单击任何项​​目时，我希望列表组消失，并且该类别的详细信息应该在屏幕上可见。同样，上面的静态部分也不会受到影响。我该如何实现？

最佳答案

您可以使用ui-router和多命名视图或嵌套视图轻松实现：

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

 $stateProvider.state('nestedViews', {
        url: '/nested-views',
        views: {
            '': {
                templateUrl: 'components/nestedViews/partial-nested-views.html'
            },
            'columnOne@nestedViews': {
                templateUrl: 'components/nestedViews/partial-nested-views-content.html'
            },
            'columnTwo@nestedViews': {
                templateUrl: 'components/nestedViews/partial-nested-views-menu.html'
            }
        }
    });

在您的HTML中

<div class="row">
    <div class="col-sm-9">
        <div ui-view="columnOne"></div>
    </div>
    <div class="col-sm-3">
        <div ui-view="columnTwo"></div>
    </div>
</div>

在您的输入中

<a ui-sref="the_state" class="list-group-item list-group-nav-item">Category 1</a>

关于javascript - 在元素组的列表组和div之间切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38639535/