jQuery UI 手风琴不工作嵌套 div

Question

jQuery 手风琴似乎不适用于嵌套 div jsfiddle（单击加载按钮）

在 javascript 中，我为标题元素“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 标记，并将他的类附加到带有 NewCardContainer div 的 h3 标记包装器

我遇到的问题是让它为另一个 h3 标签工作，这样当用户点击卡片信息时，它会很好地向下滑动，这已在 jQuery-ui 手风琴示例代码中显示

Answer 1

如果您保持简单并遵循文档，那么一切都会奏效。 Accordion 应该只包含<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>