javascript - 如何在 Angular js中制作滑动切换功能

Question

我正在尝试在 Angular 中制作滑动切换功能。但没有像我们在 jquery 中所做的那样完美，请参阅示例。面板向下滑动并隐藏在向上滑动中。我们可以在 Angular js 中制作吗 演示 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

实际上，在我的标题中有一个搜索按钮(左侧)，我需要使用它来显示切换幻灯片按钮与上面相同的动画。我们可以在 Angular 中执行这里是我的代码

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; */
}

Demo