javascript - 使用 JQuery/Javascript 如何折叠带有更改事件的 jQuery 移动可折叠对象？

Question

我有一个可折叠的对象，里面有两个选择。当用户从其中一个选择中选择一个选项时，我希望可折叠对象折叠。

这是我的html：

<div data-role="collapsible" data-collapsed-icon=" " data-expanded-icon=" ">
    <h1 class="toggleHolder ui-nodisc-icon" href="#toggles"><span class="displayLang" id="displayLang"></span>&nbsp;/&nbsp;<span class="displayRegion" id="displayRegion"></span></h1>
    <div class="toggleHolder" id="toggleHolder" data-role="main">
        <form>
            <fieldset class="ui-field-contain">
            <label for="langSelect">Language:</label>
                <select name="langSelect" id="langSelect">
                    <option value=" " selected>Select Language</option>
                    <option value="en">English</option>
                    <option value="fr">French</option>
                </select>
            </fieldset>

            <fieldset class="ui-field-contain">
            <label for="regionSelect">Region:</label>
                <select name="regionSelect" id="regionSelect">
                    <option value=" ">Select Province</option>
                    <option class="province" value="ab">Alberta</option>
                    <option class="province" value="bc">British Columbia</option>
                    <option class="province" value="mb">Manitoba</option>
                    <option class="province" value="nb">New Brunswick</option>
                    <option class="province" value="nl">Newfoundland</option>
                    <option class="province" value="ns">Nova Scotia</option>
                    <option class="province" value="on">Ontario</option>
                    <option class="province" value="pe">Prince Edward Island</option>
                    <option class="province" value="qc">Quebec</option>
                    <option class="province" value="sk">Saskatchewan</option>
                </select>
            </fieldset>
        </form>
    </div>
</div>

这是我第一次选择的脚本：

<script>
    $('#langSelect').change(function() {
        $('.ui-collapsible').attr('data-collapsed','true'); 
        $('.ui-collapsible').addClass("ui-collapsible-collapsed");      
    });
</script>

脚本将属性和类添加到可折叠对象，但对象不会折叠。

Answer 1

尝试以下方法：

$(document).ready(function() {
    $('#langSelect').on("change", function() {
        $('.ui-collapsible').collapsible("collapse");     
    });
});