如何在Bootstrap折叠中更改图标以满足多种需求

How to change icon in Bootstrap collapse for multiple requirments

本文关键字：图标 满足 需求 Bootstrap 折叠      更新时间：2023-09-26

我已经为三个不同的div使用了Bootstrap collapse来满足不同的需求。

第一次折叠div：我需要更改"显示文本并隐藏"的"glypion左下图标"。

<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：我需要更改"显示文本和隐藏"的"glypion加号和减号"图标。

<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：我需要更改"glypion左下图标"，还需要更改显示文本和隐藏的"显示更多"、"显示更少"的文本。

<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要求。请建议如何存档第二个&第三次崩溃。

// 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

请尝试此

$('.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");
});
相关文章：