如何在Angular JS中制作幻燈片切換功能

Question

我正在嘗試在angular中創建幻燈片切換功能。但沒有像我們在jquery中看到的那樣變得完美。面板在幻燈片中向下滑動並在幻燈片中向上隱藏。我們可以在angular js中進行演示嗎http：//www.w3schools的.com / jquery的/ tryit.asp？文件名= tryjquery_slide_toggle

實際上在我的標題中有一個搜索按鈕（左側），使用它我需要顯示與上面相同的動畫切換按鈕。

http://plnkr.co/edit/wONbjeisEZtr7ffCmb15?p=preview

angular.module('ionicApp', ['ionic'])
.controller('MyController', function($scope) {
  $scope.displaySearchBar=false;
  $scope.toggleSearch = function(){
    $scope.displaySearchBar= !$scope.displaySearchBar;
  }
})

在我的演示中，它是從頂部開始的。我需要像w3學校示例中一樣將其打開

Answer 1

您不應將z-index用於搜索欄，需要將其刪除。 當前，您正在使用z-index動畫時在標題頂部顯示搜索欄。 刪除z-index將顯示出與w3學校網站類似的效果。

CSS

.searchclass {
   border: 1px solid red;
   margin: 0 !important;
   position: absolute;
   width: 100%;
   /* z-index: 999; */
}

演示