具有数据增强的 ="true"的 Jquery Mobile 可折叠列表

Question

我的页面中需要一个带有拆分按钮的可折叠元素。所以我从“频繁”( Add link within collapsible content header (split- link) - css missing 和 http://jsfiddle.net/XqAvB/2/ )中找到了解决方案，这非常好。现在我对其进行了一些改进，使代码也可以显示弹出窗口。在我的版本中，我在可折叠元素内使用了一个 ListView 来显示附加信息。

整个构造都在 data-role="content"组中，所以它有一点白边。在这里我的问题开始了:标题有边框，但 ListView 没有。我需要使用哪个代码，以便内容组内的所有部分都得到一个白板或换句话说一个数据插入，这是真的吗？我认为问题出在类 (CSS) 参数中，我想我必须添加附加词、代码元素。但是哪个呢？

这是我案例中的一小部分 JSFiddle，它应该能更好地解释一下: http://jsfiddle.net/Cat_Turbo/BMN44/

HTML

<div data-role="page" id="page1">
<div data-role="content">
<div data-role="collapsible" data-theme='b' data-content-theme='d' data-collapsed='true' class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed doublemeaning" data-enhanced="true" data-inset="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="myheading ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus" href="#">Title</a>
<a class="click_action ui-btn ui-btn-icon-notext ui-icon-delete ui-corner-all " data-enhanced="true"  data-rel="back">New Page HTML</a>
</h3>
<ul data-role="listview" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
<div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" style="max-width:100%; padding:1px;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p> <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>
</div>
</div>
</div>

JQuery

$(".click_action").bind("click", function (e) {
console.log('clicked');
  e.stopPropagation();
  e.preventDefault();
  e.stopImmediatePropagation();
  console.log('Should now go to: '+$(this).attr('href'));
  $.mobile.changePage($(this).attr('href'));
});

CSS

.ui-collapsible-inset .ui-collapsible-heading .ui-btn.click_action {
position: absolute;
top: 0;
right: 1px;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-width: 0px;
margin-top: -1px;
margin-bottom: -1px;
}

Answer 1

您正在使用增强 HTML 标记。您想要实现的正确 HTML 结构如下。

<div data-role="collapsible" data-theme='b' data-content-theme='a' data-collapsed='true'>
  <h3>Title
<a class="click_action ui-btn ui-btn-b ui-btn-icon-notext ui-icon-delete">Custom button</a>
  </h3>
  <ul data-role="listview">
    <li>test 1</li>
    <li>test 2</li>
  </ul>
</div>

• 我已将 ui-btn-b 类添加到按钮以获得可折叠的相同主题。

• 内部 popup div 应该是页面 div 的直接子级，或者作为 外部 弹出窗口在页面 div 之外。

• 在 JS 代码中，return false; 最后的行为类似于 preventDefault() 和 stopImmediatePropagation() 的组合。

Demo