實現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可摺疊不擴展

回答

相關問題