jQueryのUIのアコーディオンは

Question

jQueryのアコーディオンは、JavaScriptでネストされたdiv要素jsfiddle（ロード・ボタン上クリック）

と非常によく動作するようには思えないネストされたdiv要素を働いていない私は、「ヘッダ要素の選択を追加しましたH3"

$("#accordion").accordion({ 
    header: "h3", 
    icons: icons, 
    }); 

全Javascriptを：

function simplate2(data, template) { 
    return data.map(function(e) { 
    return template.replace(/\{\{(\S+)\}\}/g, function(match, p1) { 
     return e[p1] 
    }); 
    }).join(' '); 
} 

var test101 = $('#test101'), 
    query = { 
    bid: 0815, 
    f: 'FethStripeCard' 
    }, 
    template = $('#template').html(), 
    icons = { 
    header: "ui-icon-circle-arrow-e", 
    activeHeader: "ui-icon-circle-arrow-s" 
    }; 

$(document).on('click', 'button', function() { 
    $.post("/echo/json/", query, function(d) { 

    var data = [{ 
     "id": "card_187wcdHV08ug7", 
     "type": "Visa", 
     "cardno": "**** 4242", 
     "exp_month": 6, 
     "exp_year": 2019 
    }, { 
     "id": "card_189KaFH", 
     "type": "MasterCard", 
     "cardno": "**** 4444", 
     "exp_month": 5, 
     "exp_year": 2017 
    },{ 
     "id": "card_187wcdHV08ug7", 
     "type": "Visa", 
     "cardno": "**** 4242", 
     "exp_month": 6, 
     "exp_year": 2019 
    },]; 

    test101.html(simplate2(data, template)) 
    /*.accordion({ 
    icons: icons 
    }); 
    */ 
    }); 

    $("#accordion").accordion({ 
    header: "h3", 
    icons: icons, 

    }); 
}); 

HTML

<div id="accordion"> 
<div id="test101"> 
    <div id="template"> 

    <h3>{{type}} {{cardno}} exp{{exp_month}}/{{exp_year}}</h3> 
    <div id="savedcard1-option"> 
     <div class="control-group"> 
     <form> 
      <p class="card-type Visa card-type-amex"> {{type}} (Fee $0.20)</p> 
      <input data-saved-card-id="{{id}}" type="hidden" class="addItemPo"> 
      <div class="controls"> 

      <button type="submit" class="stripe-button-el">Place my order</button> 
      </div> 
     </form> 
     </div> 

    </div> 
    </div> 
</div> 
    <div id="NewCardContainer"> 
    <h3>Pay with debit or credit card </h3> 

    <form> 

     <p class="card-type card-type-amex"> <span style="display:none"> 
    <span class="card-name"></span> (Fee £<span id="NewCardFee"></span>)</span> 
     </p> 
     <div class="control-group"> 
     <label for="NewCardNumber" class="control-label">Card Number</label> 
     <div class="controls"> 
      <input autocomplete="off" class="text text-large input-large" data-val="true" data-val-cardtypemustbevalid="Invalid card type" data-val-regex="Your card number must be 12-19 digits and cannot contain spaces" data-val-regex-pattern="^(\d{12,19})$" data-val-required="Card number is required" 
      id="NewCardNumber" maxlength="19" name="card_accountNumber" placeholder="" required="required" title="Card Number" type="tel" value=""> 
      <span class="field-validation-valid" data-valmsg-for="card_accountNumber" data-valmsg-replace="true"></span> 
      <div class="control-info"> 

      <input id="SaveCardCheckbox" type="checkbox" title="Save my card for quicker reordering" checked=""> 
      <label for="SaveCardCheckbox">Save my card for quicker reordering</label> 

      </div> 
     </div> 
     </div> 
    </form> 

    </div> 
</div> 

<button>Load</button> 

これは最初の3生成h3タグを無視し、私が午前問題は、他のh3タグのために働くためにそれを取得しているNewCardContainerのdiv

でh3タグラッパーに彼のクラスを添付するように見えますユーザがカード情報をクリックすると、うまく滑り落ちるようになります。jQuery-uiアコーディオンのサンプルコードに表示されています。

Answer 1

アコーディオンには、<h3>（または他のヘッダー）のみが含まれ、そのヘッダーの内容が続きます。それでおしまい。

Jsfiddle：ここhttps://jsfiddle.net/07w55tyj/11/ またはビュー：

function simplate2(data, template) { 
 
    return data.map(function(e) { 
 
    return template.replace(/\{\{(\S+)\}\}/g, function(match, p1) { 
 
     return e[p1] 
 
    }); 
 
    }).join(' '); 
 
} 
 

 
var template = $('#template').html(), 
 
    icons = { 
 
    header: "ui-icon-circle-arrow-e", 
 
    activeHeader: "ui-icon-circle-arrow-s" 
 
    }; 
 

 
var data = [{ 
 
    "id": "card_187wcdHV08ug7", 
 
    "type": "Visa", 
 
    "cardno": "**** 4242", 
 
    "exp_month": 6, 
 
    "exp_year": 2019, 
 
    "fee": 0.50 
 
}, { 
 
    "id": "card_189KaFH", 
 
    "type": "MasterCard", 
 
    "cardno": "**** 4444", 
 
    "exp_month": 5, 
 
    "exp_year": 2017, 
 
    "fee": 0.50 
 
}, { 
 
    "id": "card_187wcdHV08ug7", 
 
    "type": "Visa", 
 
    "cardno": "**** 4242", 
 
    "exp_month": 6, 
 
    "exp_year": 2019, 
 
    "fee": 0.50 
 
}, ]; 
 

 
$('#accordion').prepend(simplate2(data, template)) 
 

 
$("#accordion").accordion({ 
 
    header: "h3", 
 
    icons: icons, 
 

 
});

#template { 
 
    display: none 
 
}

<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 
<div id="template"> 
 
    <h3>{{type}} {{cardno}} exp{{exp_month}}/{{exp_year}}</h3> 
 
    <div id="savedcard1-option"> 
 
    <div class="control-group"> 
 
     <form> 
 
     <p class="card-type Visa card-type-amex"> {{type}} (Fee $0.20)</p> 
 
     <input data-saved-card-id="{{id}}" type="hidden" class="addItemPo"> 
 
     <div class="controls"> 
 

 
      <button type="submit" class="stripe-button-el">Place my order</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<div id="accordion"> 
 
    <h3>Pay with debit or credit card </h3> 
 

 
    <form> 
 

 
    <p class="card-type card-type-amex"> <span style="display:none"> 
 
    <span class="card-name"></span> (Fee £<span id="NewCardFee"></span>)</span> 
 
    </p> 
 
    <div class="control-group"> 
 
     <label for="NewCardNumber" class="control-label">Card Number</label> 
 
     <div class="controls"> 
 
     <input autocomplete="off" class="text text-large input-large" data-val="true" data-val-cardtypemustbevalid="Invalid card type" data-val-regex="Your card number must be 12-19 digits and cannot contain spaces" data-val-regex-pattern="^(\d{12,19})$" data-val-required="Card number is required" 
 
     id="NewCardNumber" maxlength="19" name="card_accountNumber" placeholder="" required="required" title="Card Number" type="tel" value=""> 
 
     <span class="field-validation-valid" data-valmsg-for="card_accountNumber" data-valmsg-replace="true"></span> 
 
     <div class="control-info"> 
 

 
      <input id="SaveCardCheckbox" type="checkbox" title="Save my card for quicker reordering" checked=""> 
 
      <label for="SaveCardCheckbox">Save my card for quicker reordering</label> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
</div>