我正在使用bootstrap 2.2.1,无论出于何种原因,data-parent属性没有按预期执行.当我点击另一个目标时,它不会关闭先前打开的目标.这是一个带有下面代码的
fiddle,关于如何解决这个问题的任何想法?
<div id="accordion"> <ul> <li> <a href="#" data-toggle='collapse' data-target='#document',data-parent='#accordion'>option 1</a> <ul id="document" class="collapse"> <li> <a href="#">suboption 1</a></li> <li> <a href="#">suboption 1</a></li> <li> <a href="#">suboption 1</a></li> </ul> </li> <li> <a href="#">option 2</a> </li> <li> <a href="#">option 3</a> </li> <li> <a href="#" data-toggle='collapse' data-target='#document2',data-parent='#accordion'>option 4</a> <ul id="document2" class="collapse"> <li> <a href="#">suboption 1</a></li> <li> <a href="#">suboption 1</a></li> <li> <a href="#">suboption 1</a></li> </ul> </li> </ul> </div>
解决方法
我无法让这个工作 – 这可能是Bootstrap JS中的一些事情,你使用的是列表而不是div?
为了让它工作,我不得不重写click事件.基于这个问题:Collapsible accordion doesn’t work inside a dropdpwn-menu Bootstrap
我为每个选项链接添加了一个accordion-toggle类,然后添加了以下JavaScript以使其工作:
$(document).on('click','.accordion-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'); });
这个fiddle显示了它的实际效果.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。