如何在触发时左右改变V形符号

时间:2017-05-11 07:00:45

标签: jquery twitter-bootstrap

如何在触发时左右改变V形符号?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</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/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    $("#openClose").click(function () {
        $(this).toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
    });
</script>
</head>
<body>
    <div class="col-xs-4">
        <p>Bordered table</p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>S/no.</th>
                    <th>Name<span id="Openclose" class="glyphicon glyphicon-chevron-right"></span></th>
                    <th>Details</th>
                    <th>Contact</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>DotNetFunda</td>
                    <td>Fundamentals of .Net</td>
                    <td>support@dotnetfunda.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>ItFunda</td>
                    <td>Training of Microsoft Technologies</td>
                    <td>support@itfunda.com</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

这样的事吗?

 $("#openClose").click(function () {
        if($(this).hasClass('glyphicon-chevron-right'))
        {
          $(this).removeClass('glyphicon-chevron-right');
          $(this).addClass('glyphicon-chevron-left');
        }
        if($(this).hasClass('glyphicon-chevron-left'))
        {
          $(this).removeClass('glyphicon-chevron-left');
          $(this).addClass('glyphicon-chevron-right');
        }
    });