2017-05-11 18 views
0

如何更改右側和左側的V形符號同時控制它, 如何更改右側和左側V形符號同時控制它, 如何更改右側V形符號右側並在它的同時離開如何更改右側和左側的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>[email protected]</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>ItFunda</td> 
        <td>Training of Microsoft Technologies</td> 
        <td>[email protected]</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html> 

回答

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'); 
     } 
    }); 
+0

沒有它不工作 – manideep

+0

如果我點擊列名稱,它應更改爲左chevronb象徵權利,它應隱藏列的個人資料和聯繫 – manideep

+0

u能做出的jsfiddle? –