Javascript 引导程序2折叠图标不会更改_Javascript_Jquery_Css_Twitter Bootstrap

Javascript 引导程序2折叠图标不会更改

javascript jquery css twitter-bootstrap

Javascript 引导程序2折叠图标不会更改,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,我有下面的代码。当页面加载时，折叠中的数据隐藏起来，剩下的向下箭头是V形向下的图标当我点击此图标时，我需要将其更改为相应的“向上”图标，即V形向上图标 <!DOCTYPE html> <html lang="en"> <head> <title>Example of Twitter Bootstrap Collapse Methods</title> <link rel="stylesheet" type="text/css"

我有下面的代码。当页面加载时，折叠中的数据隐藏起来，剩下的向下箭头是V形向下的图标

当我点击此图标时，我需要将其更改为相应的“向上”图标，即V形向上图标

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


Twitter引导折叠方法示例
仪表板
考验我
$（“#summaryData”）.collapse（'hide'）；
$（'summaryData'）。在（'show hide'，函数（e）上{
如果（！$（this）.is（e.target））返回；
$（'summaryData'）.toggleClass（'icon-arrow-up-icon-arrow-down'，200）；
});
});

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

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

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

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

完美的非常感谢，太好了。非常感谢你。