Question

以下JSFiddle提供了基本的源代码：

<body>
  <div data-role="page">

    <div data-role="header" data-position="fixed">
      <h3>Sample</h3>
    </div>

    <div data-role="content">
      <ul data-role="listview" data-inset="true">
        <li>
          <div data-role="collapsible">
           <h3>Title 1</h3>
           <a href="#" class="ui-btn ui-icon-delete"></a>
           <p>Item 1</p>
          </div>
        </li>

        <li>
          <div data-role="collapsible">
            <h3>Title 2</h3>
            <p>Item 2</p>
          </div>
        </li>
      </ul>
    </div>

  </div>
</body>

1）

我想要做的是连同每个标题左侧的“+”符号，我还想要一个带有'X'符号的按钮（默认的JQM删除图标）。但我无法添加'X'标志。 “X”符号将进一步用于从列表中删除项目。

2）在“标题1”下方，我有一个<a>标记，其类为ui-btn ui-icon-delete。

即使这样，删除图标也不会显示在此<a>。

中

由于

Answer 1

关于问题的第二部分，您需要输入如下内容，

<a href="#" class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left"></a>

问题的第一部分可以部分用css实现，完全用js实现。

首先我建议你摆脱listview，因为它没有正确呈现包含可折叠的（在展开时注意到可折叠部分两侧的奇怪间距）。您可以使用少量div元素和css。

轻松模仿列表视图的容器

如果在声明每个可折叠后立即添加了一个按钮，

<div data-role="collapsible" class="my-collapsible">
    <a href="#" class="my-delete ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
....

以及将删除按钮完全定位在标题右侧的css，然后可以实现您需要的部分内容，因为它仅在扩展可折叠时才有效。

为了在折叠折叠时使其工作，需要一点js。

可能的解决方案如下，

http://jsfiddle.net/7Xh9N/

<强> HTML

-added div元素class值container，以模仿listview的白色容器。请注意，列表的第一个和最后一个元素分别具有类值container first和container last。

-added <a href="#" class="my-delete ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>与css一起使用，并使其绝对位于可折叠标题的最右侧。

<body>
  <div data-role="page">

    <div data-role="header" data-position="fixed">
      <h3>Sample</h3>
    </div>

    <div data-role="content">
<!--      <ul data-role="listview" data-inset="true">

<li>-->
        <div class="container-wrapper">
        <div class="container first">
          <div data-role="collapsible" class="my-collapsible">
              <a href="#" class="my-delete ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
           <h3>Title 1</h3>
                         <a href="#" class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left"></a>

           <p>Item 1</p>
          </div>
        </div>
  <!--      </li>-->
 <div class="container">
          <div data-role="collapsible">
            <h3>Title 2</h3>
            <p>Item 2</p>
          </div>
        </div>
   <!--      <li> -->
        <div class="container last">
          <div data-role="collapsible">
            <h3>Title 2</h3>
            <p>Item 2</p>
          </div>
        </div>
<!--         </li>
              </ul> -->
    </div>
      </div>
  </div>
</body>

<强> CSS

-container div元素的添加样式 my-delete按钮的添加样式，绝对位于标题的最右侧

.my-delete{
    position:absolute;
    top:0;
    right:2px;
    display:block !important;
    z-index:10000;
}
.container .ui-collapsible{
    position:relative;
}
.container-wrapper{
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    border-radius:5px;
}
.container{
    background-color:white;
    padding:4px;
    border:1px solid #ddd;
}

.container.first{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.container.last{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

<强> JS

- 如果在pagecreate上运行以下代码，则折叠折叠时也会显示删除按钮。

var $delButton = $('.my-delete').detach();
$('.my-collapsible').append($delButton);

http://jsfiddle.net/7Xh9N/1/

Answer 2

只需将元素'ui-btn-icon-left'添加到元素中，就可以了。

   <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left"></a>

这是一个工作小提琴：http://jsfiddle.net/vgDwj/12/

JQM向可折叠标题添加按钮

2 个答案:

http://jsfiddle.net/7Xh9N/

http://jsfiddle.net/7Xh9N/1/