我正在寻找有关可折叠的帮助,我试图在标题处于活动状态时更改标题上的图标,但似乎无法解决如果我单击另一个标题而不关闭第一个显示正确图标的标题的问题。
这是一个包含我的问题示例的代码笔。http://codepen.io/FPC/pen/xZEWVY http://codepen.io/FPC/pen/xZEWVY
这是我的代码:
<div class="container">
<div class="row">
<div class="col s6">
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons right more">expand_more</i>
<i class="material-icons right less" style="display: none">expand_less</i>
Article Title
</div>
<div class="collapsible-body">
<p>
Content Snipit
</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons right more">expand_more</i>
<i class="material-icons right less" style="display: none">expand_less</i>
Article Title
</div>
<div class="collapsible-body">
<p>
Content Snipit
</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons right more">expand_more</i>
<i class="material-icons right less" style="display: none">expand_less</i>
Article Title
</div>
<div class="collapsible-body">
<p>
Content Snipit
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
这是我正在使用的JS
$(document).ready(function(){
$( ".collapsible-header" ).click(function() {
$(".more",this).toggle()
$(".less", this).toggle()
});
});
你不需要为此使用 javascript
删除 javascript 并仅使用 css
html
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">expand_less</i>First</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">expand_less</i>Second</div>
</li>
</ul>
css
.collapsible li.active i {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)