实现CSS可折叠，无法扩展

Question

我试图在我的项目中添加具有默认行为的可折叠样式的手风琴。标头似乎可以进入用户界面，但不会扩展以显示可折叠主体部分。有人知道我该如何做吗？还是看看为什么不是呢？

这是我的html：

<div class="section">
<div ng-repeat="diary in diaries | orderBy:'date' ">
<div class="row">
    <div class="col s2 push-s11">
        <a class="btn-floating btn-large waves-effect waves-light red right-align" ng-click="deleteDiary(diary.id)"><i class="material-icons">delete_forever</i></a>
    </div>
</div>
<div class="row">
    <h5 class="center-align"><b>{{diary.category}}</b></h5> 
    <h6 class="center-align">{{diary.date}}</h6>
</div>

<div class="row">
    <div class="foodContainer">
    </div>
    <div class="row center-align">
        <ul class="collapsible popout" data-collapsible="accordion" watch>
            <li ng-repeat="food in diary.foods">
                <div class="collapsible-header">{{food.title}}</div>
                <div class="collapsible-body">
                        <label><b>Calories: </b><p>{{food.calories}}</p></label>
                        <label><b>Fat: </b><p>{{food.fat}}</p></label>
                        <label><b>Protein: </b><p>{{food.protein}}</p></label>
                        <label><b>Sodium: </b><p>{{food.sodium}}</p></label>
                        <label><b>Sugars: </b><p>{{food.sugars}}</p></label>
                </div>
            </li>
        </ul>
    </div>
</div>
</div>
</div>

这是初始化可折叠对象的控制器：

"use strict";

app.controller("DiaryCtrl", function($scope, $rootScope, $location, DiaryFactory, FoodFactory){
$scope.selectedDiary = '';
// $scope.selectedDiary = 'Diary0';
$scope.totalCalories = 0;
$scope.totalFat = 0;
$scope.totalProtein = 0;
$scope.totalSodium = 0;
$scope.totalSugars = 0;
$scope.diaries = [];
$scope.foods = [];

//activate materialize collapsible list 
$('.collapsible').collapsible();

//getMeals
//lists all meals on the diary page
let getAllDiaries = function(){
    DiaryFactory.getDiary($rootScope.user.uid).then(function(FbDiaries) {
        $scope.diaries = FbDiaries;
        console.log('diaries: ', $scope.diaries);
        FoodFactory.getFoodsFB($rootScope.user.uid).then(function(FbFoods){
            console.log('foods from controller', FbFoods);
            FbFoods.forEach(function(food){
                $scope.diaries.forEach(function(diary){
                    // console.log('foods', food);
                    if(food.mealId === diary.id){
                        diary.foods = diary.foods || [];
                        diary.foods.push(food);
                        console.log('foods array on diary', diary.foods);
                    }
                });
            });
        });
    });
};
getAllDiaries();

这是屏幕截图：屏幕截图

Answer 1

我之前在React.js和Materialize CSS上也遇到过同样的问题。

原因与@DennyHio所说的完全一样，这些DOM不可折叠，因为它们是在Materialize CSS完成其初始化脚本后由Angular / React创建的。

我们必须手动“初始化”那些DOM：

function afterAngularOrReactHasCreatedAllDOM (){
    // Manually make all DOM with .collapsible collapsible 
    $('.collapsible').collapsible();
}