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

Question

首先，我正在使用 jQuery 移动设备构建本机应用程序，并且我有如下所示的折叠数据

如果用户尝试在没有 select 的情况下打开折叠 window 或单击上一个折叠中的项目，他会收到警告，这里是我的代码。

/**
 * 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

而不是将 data-collapsed 属性设置为 true 或 false，您想要触发 jQuery 以实际执行折叠或展开操作（并且它还会然后为您设置适当的属性）。

例如，而不是：

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

尝试：

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

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

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

How to control collapse when user click the item from list

javascript

jquery

jquery-mobile