Question

我正在使我的列表分割器可折叠。最初列表将被展开，但用户可以通过单击向上箭头图标来折叠它，并且图标也应该更改为向下箭头。我无法在此处更改图标。这是我的代码

<ul data-role="listview" class="selectHeader" id="bank_name" data-theme="d" data-divider- theme="d" data-filter="false" data-inset="false"  style="padding:0px;margin-top: 0px;margin-left: -5px">
   <li  data-role="list-divider" id="accountgrp">Account Groups

                 <div data-type="horizontal"  style="margin:-11px 30px -10px 0;display: inline;float: left;">
                  <a  id="grp-check-all" data-role="button" data-theme="a" data-icon="check-all" data-inline="true" data-iconpos="notext">Check All</a>
                </div>
                 <div data-type="horizontal"  style="margin:-11px 10px -10px 0;display: inline;float: right;">

                  <a  id="grp-clear-all" data-role="button" data-theme="a" data-icon="clear-all" data-inline="true" data-iconpos="notext">Clear</a></div>

                 <div data-type="horizontal"  class="openclose" >

                  <a  id="updown" data-role="button" data-theme="a" data-icon='arrow-u' data-inline="true" data-iconpos="notext">updown</a></div>


                  </li>

          <li  class="filterselect accountgrp ui-icon-arrow-u" data-icon="false"  id="group1"  ><a href="#"  data-panel="main" data-transition="slide"> Group1 </a></li>
            <li class="filterselect accountgrp ui-icon-arrow-u" data-icon="false"  id="group2"><a href="#"  data-panel="main" data-transition="slide">Group2</a></li>
            <li class="filterselect accountgrp ui-icon-arrow-u" data-icon="false" ><a href="#bankdetail1" data-panel="main" data-transition="flip">Group3</a></li>

             <li data-role="list-divider">Bank Code
                  <div data-type="horizontal"  style="margin:-11px 30px -10px 0;display: inline;float: left;">
                  <a  id="grp-check-all" data-role="button" data-theme="a" data-icon="check-all" data-inline="true" data-iconpos="notext">Check All</a>
                </div>
                 <div data-type="horizontal"  style="margin:-11px 30px -10px 0;display: inline;float: right;">

                  <a  id="grp-clear-all" data-role="button" data-theme="a" data-icon="clear-all" data-inline="true" data-iconpos="notext">Clear</a></div>

             </li>
             </ul>

CSS ..

   .openclose{
       margin:-28px 25px -10px 0px;
       display: inline;float: right;    
     }

和jquery仅用于第一个列表分隔符

$('#updown').live ("click", function (event)
{ 

var $span = $("ul.selectHeader").children(".accountgrp");

  if ($span.hasClass("ui-icon-arrow-u"))
{
    $(".accountgrp").hide();
    $span.removeClass ("ui-icon-arrow-u").addClass ("ui-icon-arrow-d");
    //$('#bank_name').listview('refresh');
}
else
{
    if ($span.hasClass ("ui-icon-arrow-d")) 
    {

        $(".accountgrp").show();
        $span.removeClass ("ui-icon-arrow-d").addClass ("ui-icon-arrow-u");
        //$('#bank_name').listview('refresh');


    }

}
    })

Answer 1

jQuery Mobile在初始化时会更改小部件的HTML结构。 Long-Story-Short，您需要选择.ui-icon元素作为原始小部件的后代才能更改图标。

长报导 - 长：

以下是未初始化的小部件示例：

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
            <li><a href="docs/about/getting-started.html">Quick start guide</a></li>
            <li><a href="docs/about/features.html">Features</a></li>
            <li><a href="docs/about/accessibility.html">Accessibility</a></li>
            <li><a href="docs/about/platforms.html">Supported platforms</a></li>
        </ul>

这是同样的小部件初始化：

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
            <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-f ui-corner-top">Overview</li>
            <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
                <div class="ui-btn-inner ui-li">
                    <div class="ui-btn-text">
                        <a href="docs/about/intro.html" class="ui-link-inherit">Intro to jQuery Mobile</a>
                    </div>
                    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
                </div>
            </li>
            ...
        </ul>

请注意，在初始化的HTML中，.ui-icon元素上指定了图标类。

Answer 2

您可以尝试修改代码，如下所示：

$('#updown').live ("click", function (event)
{ 
    var $span = $("ul.selectHeader").children(".accountgrp");
    if ($span.hasClass("ui-icon-arrow-u"))
    {
        $(".accountgrp").hide();
        $('.ui-icon-arrow-u').removeClass ("ui-icon-arrow-u").addClass ("ui-icon-arrow-d");
        //$('#bank_name').listview('refresh');
    }
    else
    {
        if ($span.hasClass ("ui-icon-arrow-d")) 
        {
            $(".accountgrp").show();
            $('.ui-icon-arrow-d').removeClass ("ui-icon-arrow-d").addClass ("ui-icon-arrow-u");
            //$('#bank_name').listview('refresh');
        }
    }
});

如何更改列表分隔符上的图标而不刷新下面的数据

2 个答案: