Question

我正在使用bootstrap 3并且我有一些可折叠的面板，它们在结果页面上充当过滤器。因此它不是真正的手风琴菜单，因为在任何给定时间都可以打开多个。另外一些将在页面加载时打开（使用class in）。所以我需要一些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>

显然，当时所有面板都有V形图标。非常感谢

Answer 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

Bootstrap切换雪佛龙

1 个答案: