文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Jquery accordion在页面加载时折叠

问Jquery accordion在页面加载时折叠
EN

Stack Overflow用户
提问于 2016-03-28 16:53:40
回答 2查看 130关注 0票数 1

我正在尝试使用jquery创建一个可扩展的手风琴。我不知道我该如何防止它在页面加载时膨胀。我对jquery一无所知，任何帮助都将不胜感激。

代码语言：javascript
复制
            <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文件：

代码语言：javascript
复制
$(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

javascript
jquery
EN

回答 2

Stack Overflow用户

发布于 2016-03-28 19:51:11

这是因为您在加载时打开了第一个accordian。要修复此问题，请在使用$($('#accordion .expand-icon')[0]).click();加载时对其执行单击操作。请查看此处的工作示例http://www.bootply.com/vGoKbvfKtl

票数 1
EN

Stack Overflow用户

发布于 2016-03-28 21:15:05

当页面加载时，您只是显示所有的手风琴，因为没有任何隐藏的地方。

根据您的代码，因为只有第一个Accordion包含数据，所以它将被显示，否则每个可扩展的div都将显示。

这个问题的解决方案是向类accordion添加一个隐藏类，这样它就不会在开始时显示，在单击函数时，您可以删除该类，然后它就会显示出来。

​

代码语言：javascript
复制
$(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()
    }) 
});
代码语言：javascript
复制
<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>

​

这是引导程序，

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/36259008

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档