2

我需要在我的页面中有一个带有拆分按钮的可折叠元素。所以我从“频繁”（在可折叠内容标题中添加链接（拆分链接）-缺少 css和http://jsfiddle.net/XqAvB/2/）找到了解决方案，这非常好。现在我对其进行了一些改进，以便代码也可以显示弹出窗口。在我的版本中，我在可折叠元素内使用了一个列表视图来显示附加信息。

整个构造在 data-role="content" 组内，所以它有一个小白板。我的问题从这里开始：标题有边框，但列表视图没有边框。我需要使用哪个代码，以便内容组内的所有部分都得到一个白板，或者换句话说，一个数据插入是真的？我认为问题出在类（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;
}
4

1 回答 1

4

您正在使用增强的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为按钮添加了类以获得相同的可折叠主题。

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

  • 在 JS 代码return false;末尾的行为就像preventDefault()和stopImmediatePropagation()组合。

演示

于 2014-01-18T00:15:31.550 回答