Сводный список Jquery для мобильных устройств с расширением данных ="true"

Question

Мне нужен был разборный элемент с разделенными кнопками на моей странице. Таким образом, я нашел решение от "частого" ( добавить ссылку в сворачиваемом заголовке контента (split- link) - отсутствует 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;
}

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 Класс на кнопку, чтобы получить ту же тему складной.

• Внутренний всплывающий элемент div должен быть либо прямым потомком страницы, либо внешним элементом страницы как внешний всплывающий элемент.

• В коде JS return false; в конце действует как preventDefault() а также stopImmediatePropagation() вместе взятые.

демонстрация