Cordova:HTML的手风琴列表

Question

我需要以下HTML代码的手风琴列表。我只希望它在单击"技术"时能够打开(扩展(。再次单击时，它将关闭(崩溃(。

这是我的HTML代码

      <!-- Techincal -->
      <div class="item">
        <div class="row">
          <div class="col boldText">Technical</div>
        </div>
      <!--List-->
      <div class="item">
        <div class="row centerized">
          <div class="col col-40"></div>
          <div class="col col-30">Min</div><div class="col col-30">Max</div>
        </div>
        <div class="row">
          <div class="col col-40">Tech spec</div>
          <div class="col col-30"><input type="number" placeholder="0" ng-model="searchQuery.techMin"></div>
          <div class="col col-30"><input type="number" placeholder="5"  ng-model="searchQuery.techMax"></div>
        </div>
        <div class="row">
          <div class="col col-40">Radius</div>
          <div class="col col-30"><input type="number" placeholder="-1000" ng-model="searchQuery.radiusMin"></div>
          <div class="col col-30"><input type="number" placeholder="1000" ng-model="searchQuery.radiusMax"></div>
        </div>
      </div>
</div>

我只有简单的HTML只有JavaScript代码。它用离子/科尔多瓦(Ionic/Cordova(编写。单击时如何使其成为简单的预设可折叠式且可扩展？

Answer 1

有多种方法可以解决此问题，我根据您的要求找到此方法

您的HTML代码

 <!-- Techincal -->
      <ul>
        <li  class="item-stable item-icon-right" 
            ng-click="toggleGroup(0)" 
            ng-class="{active: isGroupShown(0)}">
            <button class="item-text-center item-text-wrap">Techincal </button>
        </li>
        <div   class="item-accordion"
                ng-show="isGroupShown(0)">
                <div class="item">
                    <div class="row">
                        <!--List-->
                        <div class="item">
                            <div class="row centerized">
                                <div class="col col-40"></div>
                                <div class="col col-30">Min</div><div class="col col-30">Max</div>
                            </div>
                            <div class="row">
                                <div class="col col-40">Tech spec</div>
                                <div class="col col-30"><input type="number" placeholder="0" ng-model="searchQuery.techMin"></div>
                                <div class="col col-30"><input type="number" placeholder="5"  ng-model="searchQuery.techMax"></div>
                            </div>
                            <div class="row">
                                <div class="col col-40">Radius</div>
                                <div class="col col-30"><input type="number" placeholder="-1000" ng-model="searchQuery.radiusMin"></div>
                                <div class="col col-30"><input type="number" placeholder="1000" ng-model="searchQuery.radiusMax"></div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
      </ul>   

这是您的JS代码

<script>
   $scope.toggleGroup = function(group) {
        if ($scope.isGroupShown(group)) {
            $scope.shownGroup = null;
        } else {
            $scope.shownGroup = group;
        }
    };
    $scope.isGroupShown = function(group) {
            return $scope.shownGroup === group; 
};
</script>

Answer 2

类似的东西，没有额外的模块。只是一个简单的解决方案来切换一些内容。如果需要，可以使用CSS进行动画。这只是为了让您开始最初的问题。

查看

  <!-- Techincal -->
  <div class="item">
    <div class="row">
      <div style="padding:10px; background: gray;" class="col boldText" ng-click="vm.toggleContainer()">Technical</div>
    </div>
    <!--List-->
    <div class="item" style="margin-top:25px;" ng-if='vm.showTechnicalDetails'>
      <div class="row centerized">
        <div class="col col-40"></div>
        <div class="col col-30">Min</div>
        <div class="col col-30">Max</div>
      </div>
      <div class="row">
        <div class="col col-40">Tech spec</div>
        <div class="col col-30">
          <input type="number" placeholder="0" ng-model="searchQuery.techMin">
        </div>
        <div class="col col-30">
          <input type="number" placeholder="5" ng-model="searchQuery.techMax">
        </div>
      </div>
      <div class="row">
        <div class="col col-40">Radius</div>
        <div class="col col-30">
          <input type="number" placeholder="-1000" ng-model="searchQuery.radiusMin">
        </div>
        <div class="col col-30">
          <input type="number" placeholder="1000" ng-model="searchQuery.radiusMax">
        </div>
      </div>
    </div>
  </div>

</div>

JS角部分(vm方法(

angular
  .module('app', [])
  .controller('MainController', MainController)
function MainController() {
  var vm = this;
  vm.toggleContainer = toggleContainer;
  vm.showTechnicalDetails = false;
  function toggleContainer() {
    vm.showTechnicalDetails = !vm.showTechnicalDetails;
  }
}

jsfiddle：https：//jsfiddle.net/daandesmedt/ln2dgmer/

JS角部分($scope方法(

angular
  .module('app', [])
  .controller('MainController', MainController)
function MainController($scope) {
  $scope.showTechnicalDetails = false;
  $scope.toggleContainer = function(){
    $scope.showTechnicalDetails = !$scope.showTechnicalDetails;
  }
}

jsfiddle：https：//jsfiddle.net/daandesmedt/ln2dgmer/3/