0

リストの仕切りを折りたたみ可能にします。最初はリストが展開されますが、ユーザーは上矢印アイコンをクリックして折りたたむことができ、アイコンが下矢印に変わるはずです。ここでアイコンを変更できません。これが私のコードです

<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');


    }

}
    })
4

2 に答える 2

1

jQuery Mobileは、ウィジェットが初期化されると、ウィジェットのHTML構造を変更します。.ui-iconLong-Story-Short、アイコンを変更するには、元のウィジェットの子孫である要素を選択する必要があります。

ロングストーリー-ロング：

初期化されていないウィジェットの例を次に示します。

        <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要素にアイコンクラスが指定されていることに注意してください。

于 2012-08-27T19:47:05.610 に答える
0

次のようにコードを変更してみてください。

$('#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');
        }
    }
});
于 2012-08-27T19:56:26.570 に答える