Jquery 手風琴在頁面加載時折疊

Question

我正在嘗試使用 jquery 創建一個可擴展的手風琴。 我無法弄清楚我應該如何防止它在頁面加載時擴展。 我不知道 jquery，任何幫助將不勝感激。

            <ul>
            <li class="expandable root">

                <label for=" Oraganization" class="active"> Oraganization</label> 
                <span class="pull-right oraganization active expand-icon glyphicon glyphicon-minus"></span> 

                <ul id="accordion">
                    <li class="expandable">
                        <span class="expand-icon active glyphicon glyphicon-minus"></span> 
                        <input type="checkbox" id="Manager-1"> 
                        <label for="Manager-1"> Manager-1</label> 

                        <ul id="accordion">
                            <li>
                                <input type="checkbox" id="Sub-Manager-1"> 
                                <label for="Sub-Manager-1"> Sub-Manager-1</label> 
                            </li>
                            <li class="expandable">
                                <span class="expand-icon active glyphicon glyphicon-minus"></span> 
                                <input type="checkbox" id="Sub-Manager-2"> 
                                <label for="Sub-Manager-2"> Sub-Manager-2</label> 

                                <ul class="accordion">
                                    <li>
                                        <input type="checkbox" id="Associate-1"> 
                                        <label for="Associate-1"> Associate-1</label> 
                                    </li>
                                    <li>
                                        <input type="checkbox" id="Associate-2"> 
                                        <label for="Associate-2"> Associate-2</label> 
                                    </li>



                            <li class="expandable">
                                <span class="expand-icon active glyphicon glyphicon-minus"></span> 
                                <input type="checkbox" id="Associate-5"> 
                                <label for="Associate-5"> Associate-5</label> 
                                <ul class="accordion">
                                    <li>
                                        <input type="checkbox" id="Sub-associate-1"> 
                                        <label for="Sub-associate-1"> Sub-associate-1</label> 
                                    </li>
                                    <li>
                                        <input type="checkbox" id="Sub-associate-2"> 
                                        <label for="Sub-associate-2"> Sub-associate-2</label> 
                                    </li>
                                    <li>
                                        <input type="checkbox" id="Sub-associate-3"> 
                                        <label for="Sub-associate-3"> Sub-associate-3</label> 
                                    </li>   
                                    <li>
                                        <input type="checkbox" id="Sub-associate-4"> 
                                        <label for="Sub-associate-4"> Sub-associate-4</label> 
                                    </li>
                                </ul>
                                </li>
                                </ul>
                                </li>
                            </li>
                        </ul>
                    </li>


                    <li class="expandable">
                                <span class="expand-icon active glyphicon glyphicon-plus"></span> 
                                <input type="checkbox" id="Manager-2"> 
                                <label for="Manager-2"> Manager-2</label> 
                    </li>
                    <li class="expandable">

                                <span class="expand-icon active glyphicon glyphicon-plus"></span> 
                                <input type="checkbox" id="Manager-3"> 
                                <label for="Manager-3"> Manager-3</label> 
                    </li>                       

                </ul>
            </li>
        </ul>

JS文件：

$(document).ready(function(){

$('.expand-icon').click(function(){

    var elem = $(this);
    if(elem.hasClass('active')) {
        elem.removeClass('active');

        var subElem = elem.siblings('ul');
        var nestedElem =elem.siblings('ul').find('ul');

        if(nestedElem.length == 0) {
            subElem.slideUp('fast');
        }
        else {
            nestedElem.slideUp('fast',function(){
                subElem.slideUp('fast');
            });
        }
        $.when(elem.removeClass('glyphicon-minus')).then(function(){
            elem.addClass('glyphicon-plus');
        });
    }
    else {
        elem.addClass('active');
        elem.siblings('ul').slideDown('fast',function(){
            elem.siblings('ul').find('ul').slideDown('fast');   
        });
        $.when(elem.removeClass('glyphicon-plus')).then(function(){
            elem.addClass('glyphicon-minus');
        });
    }

});


$('.expandable :checkbox').on('change', function() {

    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function () {
        if($('input[type=checkbox]', this).is(':checked')) sibs=true;
    });
    $(this).parents('ul').siblings(':checkbox').prop('checked', sibs);

});

});

您可以在此鏈接中找到 bootply： http : //www.bootply.com/1W8bSTnmx6

Answer 1

在這里小提琴

這是因為您在加載時打開了第一個手風琴。 要修復它，請在加載時使用$($('#accordion .expand-icon')[0]).click(); . 檢查這里的工作示例http://www.bootply.com/vGoKbvfKtl

Answer 2

您只是在頁面加載時顯示所有手風琴，因為沒有隱藏任何地方。

根據您的代碼，由於只有第一個 Accordion 包含數據，所以它會被顯示，否則每個可擴展的 div 都會被顯示。

對此的解決方案是在類手風琴中添加一個隱藏類，使其在開始時不顯示，在單擊功能時，您可以刪除該類並顯示它。

 $(document).ready(function(){ $('.expand-icon').click(function(){ $('ul').removeClass('hide') var elem = $(this); if(elem.hasClass('active')) { elem.removeClass('active'); var subElem = elem.siblings('ul'); var nestedElem =elem.siblings('ul').find('ul'); if(nestedElem.length == 0) { subElem.slideUp('fast'); } else { nestedElem.slideUp('fast',function(){ subElem.slideUp('fast'); }); } $.when(elem.removeClass('glyphicon-minus')).then(function(){ elem.addClass('glyphicon-plus'); }); } else { elem.addClass('active'); elem.siblings('ul').slideDown('fast',function(){ elem.siblings('ul').find('ul').slideDown('fast'); }); $.when(elem.removeClass('glyphicon-plus')).then(function(){ elem.addClass('glyphicon-minus'); }); } }); $('.expandable :checkbox').on('change', function() { $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked')); var sibs = false; $(this).closest('ul').children('li').each(function () { if($('input[type=checkbox]', this).is(':checked')) sibs=true; }); $(this).parents('ul').siblings(':checkbox').prop('checked', sibs); }); $('.organization').click(function(){ $('.accordion')[0].click() }) });

 <ul> <li class="expandable "> <label for=" Oraganization" class="active"> Oraganization</label> <span class=" organization active expand-icon glyphicon glyphicon-minus"></span> <ul id=""> <li class="expandable"> <span class="expand-icon glyphicon glyphicon-plus"></span> <input type="checkbox" id="Manager-1"> <label for="Manager-1"> Manager-1</label> <ul class="accordion hide"> <li> <input type="checkbox" id="Sub-Manager-1"> <label for="Sub-Manager-1"> Sub-Manager-1</label> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-minus"></span> <input type="checkbox" id="Sub-Manager-2"> <label for="Sub-Manager-2"> Sub-Manager-2</label> <ul class="accordion"> <li> <input type="checkbox" id="Associate-1"> <label for="Associate-1"> Associate-1</label> </li> <li> <input type="checkbox" id="Associate-2"> <label for="Associate-2"> Associate-2</label> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-minus"></span> <input type="checkbox" id="Associate-5"> <label for="Associate-5"> Associate-5</label> <ul class="accordion"> <li> <input type="checkbox" id="Sub-associate-1"> <label for="Sub-associate-1"> Sub-associate-1</label> </li> <li> <input type="checkbox" id="Sub-associate-2"> <label for="Sub-associate-2"> Sub-associate-2</label> </li> <li> <input type="checkbox" id="Sub-associate-3"> <label for="Sub-associate-3"> Sub-associate-3</label> </li> <li> <input type="checkbox" id="Sub-associate-4"> <label for="Sub-associate-4"> Sub-associate-4</label> </li> </ul> </li> </ul> </li> </ul> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-plus"></span> <input type="checkbox" id="Manager-2"> <label for="Manager-2"> Manager-2</label> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-plus"></span> <input type="checkbox" id="Manager-3"> <label for="Manager-3"> Manager-3</label> </li> </ul> </li> </ul>

這是 bootply，它的 Bootply 鏈接