发布于 2017-05-19 16:38:25 | 66 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap入门,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,实现起来也很容易,但是在测试时同事提出了一个bug,怎么解决呢?今天小编通过本教程给大家分享下

今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样。于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法。


$(".love .collapse").collapse('hide'); 

调用之后发现,点击连接苗,data-parent失效了,也就是可以同时展开多个折叠框

这严重脱离了需求,于是又去查了API并写了几个demo,发现了一个问题,只要在初始化的时候调用 .collapse()方法,就会出现这种同时展开多个折叠框的情况。但是奇怪的是:当页面渲染出来后,你去点击了折叠框后,这个时候再触发某个事件调用.collapse()方法,就不会出现这种同时展开多个的情况。

于是找到了两个解决的方法:

方法一:

在我的项目中,折叠框默认是折叠的,即没有.in类,基于以上的发现,于是改变源码:


$(".love .collapse.in").collapse('hide'); 

因为在bootstrap中折叠框的展开是由.in类修饰的,所以有.in类的必定是经过点击的,在初始化的时候


$(".love .collapse.in") 

返回的必定是[]数组,因为默认是收起的。经过几个浏览器的测试,发现没有问题,问题解决了。

方法二:

在一个外国胜博发888手机平台也发现了一个解决的方法,触发这种事件发生的原因是bootstrap的js的某个机制的实现问题,但是API没有给出这种事件的说明和处理方法,于是我们可以重写折叠框展开和收起的事件,首先在连接处加一个类.collapse-toggle,这个类可以随便指定.:


$(document).on('click', '.collapse-toggle', function(event) { 
    event.stopPropagation(); 
    var $this = $(this); 
    var parent = $this.data('parent'); 
    var actives = parent && $(parent).find('.collapse.in'); 
    // From bootstrap itself 
    if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      //if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
    } 
    var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 
    $(target).collapse('toggle'); 
});​ 

这里用到了jQuery的data()方法,data()方法可以获取标签的data-*属性,我认为用在这里不是很好,主要是这个方法在IE6、IE7中不支持,要想完美兼容,可以使用attr()方法。

以上所述是小编给大家介绍的bootstrap折叠调用collapse()后data-parent不生效的快速解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz胜博发888手机平台的支持!



相关阅读 :
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
解决BootStrap Fileinput手机图片上传显示旋转问题
BootStrap模态框和select2合用时input无法获取焦点的解决方法
最新网友评论  共有(0)条评论 发布评论 返回顶部
月排行榜

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  服务