5

我有一个可折叠部分，我想添加一个图像和一个计数气泡，就像下面的标记一样。

<a href="pa.aspx">
  <img src="images/gf.png" alt="" class="ui-li-icon">
  IT Change Controls<span class="ui-li-count">4</span> 
</a>

我的问题是，如果我添加除<h3>标签之外的任何内容，则节标题将无法正确呈现。这对我不起作用..

 <div data-role="collapsible" data-inset="false" data-collapsed="false">
     <%--<h3>Section 1</h3>--%>
     <a href="pa.aspx">
         <img src="images/gf.png" alt="" class="ui-li-icon">
         IT Change Controls<span class="ui-li-count">4</span> 
     </a>

如何在部分标题中获取图像和计数气泡？

右侧带有计数气泡图像的可折叠部分图像

4

1 回答 1

4

也许以下实现接近您想要的：

<!doctype html>
<html lang="en">
   <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>   
        <style>
            div.col-set .ui-icon {
                visibility:hidden;
            }

            div.col-set .comment-count {
              float: right;
              font-size: 11px;
            }

            div.col-set .img-set {
              float: left;
            }

            div.col-set a {
                text-decoration: none;
                font-size: 11px;
            }

            div.col-set .col-text {
                margin-left: 20px;
                text-align: center;
                float: left;
                font-size: 11px;
            }
    </style>
    </head>
    <body>
        <div data-role="page">
            <div data-role="content">   
                <div class="col-set" data-role="collapsible" data-collapsed="true">
                    <h3>
                        <a href="test.html">
                            <img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/sj.png" class="img-set" alt="SJ Flag" />
                            <div class="col-text">Test 1</div>
                            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all comment-count">1</span>
                        </a>
                    </h3>
                    <p>Collapsible content 1.</p>
                </div>
                <div class="col-set" data-role="collapsible" data-collapsed="true">
                    <h3>
                        <a href="test.html">
                            <img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/sj.png" class="img-set" alt="SJ Flag" />
                            <div class="col-text">Test 2</div>
                            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all comment-count">2</span>
                        </a>
                    </h3>
                    <p>Collapsible content 2.</p>
                </div>
            </div>
        </div>      
    </body>
</html>

在此处输入图像描述

于 2012-08-28T18:53:42.303 回答