Question

这里我有一个带有glypicon雪佛龙右边符号的表，当我点击符号它没有改变为左右可以任何人帮助我，这里我有一个表与glypicon雪佛龙右符号，当我点击符号它不会改变为左右任何人都可以帮助我

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>Sample Application</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        th, a {
            background-color: green;
            color: white;
        }
    </style>
    <script>
    $(document).ready(function () {
        $(".col1").click(function () {
            $(".col2").toggle(100);
        });
    });
    $("#openClose").click(function () {
        $(this).toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
    });

    </script>
</head>
<body ng-controller="ctrl">
    <p style="color:blue;font-style:italic;">Hide and display the column</p>
    <div class="col-xs-4">
        <table class="table table-Hover table-bordered" border="1">
            <thead>
                <tr>
                    <th><a>Name<span id="openClose" class="col1 glyphicon glyphicon-chevron-right"></span></a></th>
                    <th class="col2" ng-hide="hided"><a>Country</a></th>
                    <th class="col2" ng-hide="hided"><a>Age</a></th>
                    <th><a>Course</a></th>
                    <th><a>Office</a></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="record in collection">
                    <td>{{record.name}}</td>
                    <td class="col2">{{record.country}}</td>
                    <td class="col2">{{record.age}}</td>
                    <td>{{record.course}}</td>
                    <td>{{record.office}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        var myapp = angular.module('myapp', []);
        myapp.controller('ctrl', function ($scope) {
            $scope.collection = [
                { name: 'Jani', country: 'Norway', age: '21', course: 'Java', office: 'HCL' },
                { name: 'Ram', country: 'India', age: '22', course: '.Net', office: 'Oracle' },
                { name: 'Raghu', country: 'USA', age: '23', course: 'Pega', office: 'Capgemini' },
                { name: 'Raj', country: 'England', age: '24', course: 'Testing', office: 'TechMahindra' },
                { name: 'Sai', country: 'India', age: '25', course: 'Hadoop', office: 'Infosys' }
            ];
        });
    </script>
</body>
</html>

如何在点击人字形符号时从右到左更改glypicon V形符号

0 个答案: