對應的各種效果，Framework7 裏面實現的方式比較多，這裏我就只寫我用的一種，樣式有的自己修改了的，想看官方詳細的參見 http://framework7.cn

一、手風琴布局Accordion Layout

<div class="content-block accordion-list custom-accordion">
     <div class="accordion-item">
          <div class="accordion-item-toggle">
               <i class="icon icon-plus"
 
>+</i>
               <i class="icon icon-minus">-</i>                           
               <span>
                  <span class="accordion-item-toggle-span">車</span>
               </span>
               <span class="accordion-item-toggle-s">
                  <
 
i class="icon ion-navicon"></i>
               </span>
           </div>
           <div class="accordion-item-content">
               <p>這裏是詳細描述....這裏是詳細描述....這裏是詳細描述....這裏是詳細描述....這裏是詳細描述....這裏是詳細描述....這裏是詳細描述....</p>
           </div>
      </div>
</
 
div>

var $$ = Dom7;

$$(‘.accordion-item‘).on(‘opened‘, function () {
       app.myApp.alert(‘Accordion item opened‘);
});

$$(‘.accordion-item‘).on(‘closed‘, function (e) {
       app.myApp.alert(‘Accordion item closed‘);
});

二、復選框

<label class="label-checkbox item-content"> </label> 
要包含

<input type="checkbox" name="ks-checkbox">
<div class="item-media">
   <i class="icon icon-form-checkbox"></i>
</div>

<div class="list-block">
                    <ul>
                        <li>
                            <label class="label-checkbox item-content">
                                <input type="checkbox" name="ks-checkbox">
                                <div class="item-media">
                                    <i class="icon icon-form-checkbox"></i>&nbsp;<i class="icon icon-zi ion-tihuo">提</i>
                                </div>

                                <a href="javascript:void(0)" class="item-link item-content" ng-click="goDisCharge();">
                                    <div class="item-inner">
                                        <div class="item-title">810-597889</div>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">艾青</div>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">09:00</div>
                                    </div>
                                </a>
                            </label>

                        </li>
                    </ul>
                </div>

三、彈出框 Popover

data-popover = .彈出框的類名

<div class="right" id="right">
                <a href="" data-popover=".popover-links" class="link open-popover"><i class="glyphicon glyphicon-th-large"></i></a>
            </div>

<div class="popover popover-links">
    <div class="popover-angle"></div>
    <div class="popover-inner">
        <div class="list-block">
            <ul>
                <li><a href="" class="list-button item-link statisticsList-title active">正常訂單</a></li>
                <li><a href="" class="list-button item-link statisticsList-title">異常訂單</a></li>
            </ul>
        </div>
    </div>
</div>

移動端安卓和 IOS 開發框架 Framework7 布局