Bootstrap 切换雪佛龙答案

【问题标题】：Bootstrap toggle chevronBootstrap 切换雪佛龙
【发布时间】：2014-10-08 00:09:11
【问题描述】：

我正在使用 bootstrap 3，并且我有一些可折叠的面板用作结果页面上的过滤器。所以它不是真正的手风琴菜单，因为在任何给定时间都可以打开多个菜单。另外一些将在页面加载时打开（使用类）。所以我需要一些 javascript 来根据面板的状态（打开或关闭）切换 V 形。

这里是标记：

                <!-- Filter options -->
            <div id="accordion">
                <div class="panel-header">
                    <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <ul class="list-unstyled">
                            <li class="selected"><a href="#"><span class="uxf-icon uxf-close-square"></span></a>Foreign Relations (15676) </li>
                            <li><a href="#">Vietnam War (13013)</a> </li>
                            <li><a href="#">Government Documents (10479)</a> </li>
                            <li class="selected"><a href="#"><span class="uxf-icon uxf-close-square"></span></a>Military Assistance</li>
                            <li><a href="#">More...</a></li>
                        </ul>   
                    </div> 
                </div>
                <div class="panel-header">
                    <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Geography<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
                    <div id="collapseTwo" class="panel-collapse collapse">  
                        <ul class="list-unstyled">
                            <li><a href="#">Foreign Relations (15676)</a> </li>
                            <li><a href="#">Vietnam War (13013)</a> </li>
                            <li><a href="#">Government Documents (10479)</a> </li>
                            <li><a href="#">Military Assistance </a>
                            </li><li><a href="#">More...</a></li>
                        </ul>    
                    </div>
                </div>
                <div class="panel-header">
                    <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Person As Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
                    <div id="collapseThree" class="panel-collapse collapse">    
                        <ul class="list-unstyled">
                            <li><a href="#">Foreign Relations (15676)</a> </li>
                            <li><a href="#">Vietnam War (13013)</a> </li>
                            <li><a href="#">Government Documents (10479)</a> </li>
                            <li><a href="#">Military Assistance </a>
                            </li><li><a href="#">More...</a></li>
                        </ul>  
                    </div>   
                </div>     
            </div>

显然，所有面板都有向下的雪佛龙图标。非常感谢

【问题讨论】：

那么...到目前为止，您尝试了什么？另外，如果我没记错的话，Bootstrap already has 一个 JavaScript collapse 伴随着事件等等。
您希望在 div 上打开加号和关闭减号之类的东西，对吗？还是你想要手风琴？
检查这个angular-ui.github.io/bootstrap/#/accordion 它还需要angularjs (plnkr.co/edit/?p=preview)
嗨，我想要更多的加/减。不是手风琴。

标签： javascript jquery twitter-bootstrap-3

【解决方案1】：

通过查找 in 类来检查每个 div 的打开/关闭状态。设置后，您可以在点击事件中交换 V 形类。

// onload
$('a[data-toggle=collapse]').each(function() { 
    var chevron = $(this).parent().next('div');
    if ( chevron.hasClass('in') ) {
        $(this).children('span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    } else {
        $(this).children('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    }
});

// click event
$('a[data-toggle=collapse]').click( function() {  
    // swap chevron
    $(this).children('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Bootply

【讨论】：