Bootstrap 2 折叠图标不会改变答案

【问题标题】：Bootstrap 2 Collapse Icon Does Not ChangeBootstrap 2 折叠图标不会改变
【发布时间】：2013-11-19 18:35:44
【问题描述】：

我有以下代码。当页面加载时，折叠中的数据隐藏，我留下了向下箭头，即 icon-chevron-down。

当我点击此图标时，我需要将其更改为相应的“向上”图标，即 icon-chevron-up 图标。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap Collapse Methods</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>


</head>
<body>
<div class="widget-box transparent">
                                        <div class="widget-header widget-header-flat">
                                            <h4 class="lighter">
                                                <i class="icon-star orange"></i>
                                                Dashboard
                                            </h4>

                                            <div class="widget-toolbar" style="margin-left:30px">
                                                <a href="#" data-toggle="collapse" data-target="#summaryData">
                                                    <i class="icon-chevron-down"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <div class="widget-body collapse in" id="summaryData">
                                                Test me
                                            </div><!-- /widget-body -->
                                        </div><!-- /widget-box -->
</body>

    <script type="text/javascript">
  $('#summaryData').collapse('hide');

        $('#summaryData').on('show hide', function (e) {
        if(!$(this).is(e.target))return; 
        $('#summaryData').toggleClass('icon-arrow-up icon-arrow-down', 200);
    });
        });
</script>
</html>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

摘要数据不包含图标元素，因此永远无法访问切换代码。一个快速的解决方法是添加这个点击处理函数：

  $(document.body).on('click', '.icon-chevron-down, .icon-chevron-up', function(){
      $(this).toggleClass('icon-chevron-up icon-chevron-down');
  });

【讨论】：

完美。非常感谢。