实现CSS可折叠不扩展

我试图添加一个可折叠的手风琴样式，并将默认行为添加到我的项目中。标题似乎使其成为用户界面，但它不会展开以显示可折叠主体部分。任何人都知道我如何才能做到这一点？或者看看它为什么不是？实现CSS可折叠不扩展

这里是我的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();

下面是截图： Screen Shot

来源

2016-12-15 tks2n

我个人不使用Materialise的，但我想，你的问题是这样的：首先，你从Materialise的负载可折叠的插件和应用这些插件所有'.collapsible'类，然后加载Angular。由于'.collapsible'部分是由Angular LATER生成的，因此在Angular绘制所有'.collapsible'元素后，您必须重新应用materialize插件。最简单的是使用角度兼容的插件，如https://material.angularjs.org/latest/。这是基于jQuery插件的常见问题。这就是为什么很多开发基于Angular的插件 – DennyHiu

我有同样的问题React.js和物化CSS之前。

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

我们要手工“初始化”那些以DOM：

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

来源

2016-12-15 02:21:00 user2875289

的确，我在使用Angular + jQuery UI Datepicker之前有类似的问题。简而言之，您必须在您的controller/app.js中调用可折叠（以及Materialise中的每个插件）。最好的办法是获得角度兼容的插件，并使用依赖注入器或指令，它比重新申请整个jQuery插件更容易 – DennyHiu

实现CSS可折叠不扩展

回答

相关问题