Ionic:使用JQuery的Accordion页面无法处理<ion-view>

时间:2015-11-23 08:35:50

标签: jquery ionic-framework ionic

我尝试使用Jquery在页面中创建一个手风琴。但是,当我用来调用页面时,它无法正常工作。当我把它放在索引文件上时,它正常工作。有人能帮助我吗?

的index.html

<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <ion-nav-view></ion-nav-view>
</body>
</html>

查看

<ion-view>
    <ion-content scroll="false" class="reg-success">
        <div style="width:90%;margin-left: 18px;margin-top: 20px;">
            <div id="accordion">
                <h3>1. Cras dictum. Pellentesque habitant morbi </h3>
                <div class="kelassss">
                    <p>
                        Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
                    </p>
                </div>
                <script>
                $(function() {
                    $("#accordion").accordion();
                });
                </script>
            </div>
        </div>
    <ion-content>
</ion-view>

我该怎么办?因为当我将离子视图代码放在索引文件中时它会起作用吗?

1 个答案:

答案 0 :(得分:0)

您是否尝试过使用离子手风琴完全基于角度js

 <ion-list>
    <div ng-repeat="group in groups">
      <ion-item class="item-stable"
                ng-click="toggleGroup(group)"
                ng-class="{active: isGroupShown(group)}">
          <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
        &nbsp;
        Group {{group.name}}
      </ion-item>
      <ion-item class="item-accordion"
                ng-repeat="item in group.items"
                ng-show="isGroupShown(group)">
        {{item}}
      </ion-item>
    </div>
  </ion-list>

http://codepen.io/ionic/pen/uJkCz