Question

首先我使用jQuery Mobile构建本机应用程序，我有一个崩溃数据，如下所示

如果用户尝试在没有选择的情况下打开折叠窗口或单击上一次折叠中的项目，则会向他发出警告，此处为我的代码。

/**
 * Created by dinhthinh on 29/11/16.
 */

function checkUserSelectorNot(){
   var kate = "#ul_kategoria";
   var pal = "#select-palvelu";
   var tyon = "#ul_tyontekija";
   var tunti = "#select-tunti";
   var lomake = "#lomake";
   // kategoria check
   $(kate).children('li').on("click", function () {
        $(this).data("click", true);
        if($(kate).children("li").data("click")){
           $("#coll_kategoria").attr("data-collapsed", true);
           $("#coll_palvelu").attr("data-collapsed", false);

           // palvelu check
           $(pal).find("option").on("change", function () {
              $(this).data("click", true);
              if($(pal).find("option").data("click")){
                 $("#coll_palvelu").attr("data-collapsed", true);
                 $("#coll_tyontekija").attr("data-collapsed",false);

                 // työntekija check
                 $(tyon).find("li").on("change", function () {
                    $(this).data("click", true);
                    if($(tyon).find("option").data("click")){
                       $("#coll_tyontekija").attr("data-collapsed", true);
                       $("#coll_aika").attr("data-collapsed", false);

                       // aika check

                    }
                 })
              } else {
                 alert("Älä unohda valita palvelua");
              }
           })
        } else {
           alert("Aloitta valitsemalla kategoria");
        }
   });
}

$(document).ready(checkUserSelectorNot());

但是我的代码不起作用，有人能为我解释我错在哪里吗？

<!--kategoria alue-->
            <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="carat-r" data-expanded-icon="carat-d" id="coll_kategoria">
                <h1 id="isot">Valitse kategoria</h1>
                <ul data-role="listview" data-inset="true" id="ul_kategoria" >
                    <!-- json file here -->
                </ul>
            </div>
            <!--palvelu alue-->
            <div data-role="collapsible" data-collapsed-icon="carat-r" data-expanded-icon="carat-d" id="coll_palvelu">
                <h1>Valitse palvelu</h1>
                <label for="select-palvelu" class="select"></label>
                <select name="select-choice-0" id="select-palvelu" class="select" multiple="multiple" data-native-menu="false" data-icon="grid" data-iconpos="left">

                </select>
            </div>
            <!--tyontekija alue-->
            <div data-role="collapsible" data-collapsed-icon="carat-r" data-expanded-icon="carat-d" id="coll_tyontekija">
                <h1>Valitse työntekijä</h1>
                <ul data-role="listview" data-inset="true" id="tyontekija"></ul>

            </div>
            <!--aika alue-->

            <div data-role="collapsible" data-collapsed-icon="carat-r" data-expanded-icon="carat-d" id="coll_aika">
                <h1>Valitse aika</h1>


                    <div class="ui-grid-b">
                        <div class="ui-block-a">
                            <a href="" data-mini="false" data-role="button" data-icon="arrow-l" id="minus">Edellinen viikko</a>
                        </div>
                        <div class="ui-block-b">
                            <label for="paiva"></label>
                            <select id="paiva" data-icon="calendar" data-iconpos="right">
                                <!--data päivä here from javascript code-->

                            </select>
                        </div>
                        <div class="ui-block-c">
                            <a href="" data-mini="false" data-role="button" data-icon="arrow-r" id="plus" data-iconpos="right">Seurava viikko</a>
                        </div>
                    </div>
                    <div class="ui-grid-b">
                        <div class="ui-block-b">
                           <button class="ui-btn-active" data-icon="clock">Tunti</button>
                        </div>
                        <div class="ui-block-b"></div>
                        <div class="ui-block-c">
                            <label for="select-tunti"></label>
                           <select name="tunti" id="select-tunti">
                               <!--data tunti here from javascript code-->
                           </select>
                        </div>

Answer 1

您希望触发jQuery实际执行折叠或展开操作（而且还会设置适当的属性，而不是将data-collapsed属性设置为true或false。你）。

例如，

Sor，而不是：

$("#coll_tyontekija").attr("data-collapsed", true);

尝试：

$("#coll_tyontekija").collapsible("collapse");

这称为可折叠小部件的collapse 方法。有关此窗口小部件的方法和其他方法的完整详细信息，请查看the full documentation。

用户单击列表中的项目时如何控制折叠

1 个答案: