Как контролировать коллапс, когда пользователь нажимает элемент из списка

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

Вместо того, чтобы устанавливать data-collapsed атрибуты true или false, вы хотите, чтобы вызвать JQuery на самом деле выполнить коллапс или расширить действие (и он также будет затем установить соответствующие атрибуты для вас).

Сор, например, вместо:

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

попробовать:

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

Это называется collapseметод складного виджета. Для получения полной информации об этом метод и другие методы для этого виджета, посмотрите на the full documentation.