Question

我有以下代码。当页面加载时，崩溃中的数据会隐藏，我留下的是向下箭头，即箭头向下箭头。

当我点击此图标时，我需要将其更改为相应的＆＃39; up＆＃39;图标，即图标 - 雪佛龙图标。

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

Answer 1

摘要数据不包含图标元素，因此永远不会到达切换代码。一个快速的解决方法是添加此点击处理功能：

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

Bootstrap 2折叠图标不会更改

1 个答案: