Question

我根据不同的要求使用了三个不同div的Bootstrap折叠。

首先崩溃div：我需要更改＆＃34; glypicon-left和bottom icon＆＃34; ＆＃34;显示文字并隐藏＆＃34;。

<div class="col-md-12">
    <span class="badge">
        <span>0</span>
    </span>
    <span> Function</span>
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="fb_down_arrow">
        <span class="glyphicon glyphicon-triangle-bottom"></span>
    </a>
</div>

<ul class="fb_list_option collapse in" id="collapse1">
    <li>
        <input type="checkbox" id="c5" name="cc">
        <label for="c5"><span></span>Corporate Real Estate</label>
    </li>
</ul>

第二次崩溃div：我需要更改＆＃34; glypicon-plus和minus＆＃34; ＆＃34;显示文字和隐藏＆＃34;。

的图标

<li>
    <input type="checkbox" id="c92" name="cc">
    <label for="c92"><span></span>Construction (###)</label>
    <a href="" data-toggle="collapse" data-target="#fb_plus_one" class="" >
        <span class="glyphicon glyphicon-plus fb_list_plus_arrow"></span>
    </a>
    <ul id="fb_plus_one" class="collapse in" aria-expanded="true">
        <li>
            <input type="checkbox" id="c01" name="cc">
            <label for="c01"><span></span>Child 1</label>
        </li>
    </ul>
</li>

第三次崩溃div：我需要更改＆＃34; glypicon-left和bottom icon＆＃34;并且还会更改＆＃34;显示更多＆＃34; ，＆＃34;更少＆＃34;显示文字和隐藏。

<a href="#demo1" class="doc_right_title collapsed" data-toggle="collapse" aria-expanded="false">See more detail <span class="glyphicon KB_glyphicon glyphicon-triangle-left"></span></a>
<div class="row collapse in" id="demo1" aria-expanded="true">

</div>

脚本：我正在使用下面的脚本存档第一个崩溃div要求。建议如何存档第二个＆amp;第三次崩溃。

// Collapse Start 
$('.collapse').on('shown.bs.collapse', function(){
    $(this).parent().find(".glyphicon-triangle-left")
        .removeClass("glyphicon-triangle-left")
        .addClass("glyphicon-triangle-bottom");
}).on('hidden.bs.collapse', function(){
    $(this).parent().find(".glyphicon-triangle-bottom")
        .removeClass("glyphicon-triangle-bottom")
        .addClass("glyphicon-triangle-left");
});
// Collapse End

Answer 1

请尝试此

$('.collapse').on('shown.bs.collapse', function(){
e.stopImmediatePropagation()
$(this).parent().find(".glyphicon-triangle-left").first().removeClass("glyphicon-triangle-left").addClass("glyphicon-triangle-bottom");
}).on('hidden.bs.collapse', function(){
e.stopImmediatePropagation()
$(this).parent().find(".glyphicon-triangle-bottom").first().removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-left");
});

如何更改Bootstrap崩溃中的图标以满足多项要求

1 个答案: