jQuery toggle CSS zurücksetzen?

Question

Ich möchte zwischen CSS wechseln, wenn ein Benutzer auf die Schaltfläche (# more1) klickt, ändert sich die CSS und wenn Sie erneut auf die Schaltfläche (# more1) klicken, kehrt die CSS zum Original zurück.

$(document).ready(function() { 
 
    $("#more1").click(function() { 
 
    $("#box").toggle(), 
 
     $(".second").css("background-color", "#9EACB7"); 
 
    $(".second").css("color", "white"); 
 
    $("#more1").css("background-color", "#9EACB7"); 
 
    $("button").css("background-color", "#9EACB7"); 
 
    $("button").css("color", "white"); 
 
    $("button").css("border-color", "white"); 
 
    $("#more1").css("color", "white"); 
 

 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<table> 
 
    <tr> 
 
    <th class=firstth><input type="checkbox"></th> 
 
    <th class=firstth>User ID</th> 
 
    <th class=firstth>User name and Image</th> 
 
    <th class=firstth>Phone Number</th> 
 
    <th class=firstth>Last Transaction</th> 
 
    <th class=firstth>Balance</th> 
 
    <th class=firstth>Status</th> 
 
    <th class=firstth>Actions</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="second"><input type="checkbox"></td> 
 
    <td class="second">#33225</td> 
 
    <td class="second"><img class="Profilepic" src="https://www.sophiegee.com/wp-content/uploads/square-face-59592.jpg" align="center"></img>Alfreds</td> 
 
    <td class="second">Maria Futterkiste</td> 
 
    <td class="second">086265666222</td> 
 
    <td class="second">$3552</td> 
 
    <td class="second"><button>Active</button></td> 
 
    <td class="second"><i class="fa fa-plus-circle" aria-hidden="true" id=more1></i></td> 
 
    </tr> 
 
    <th colspan="8"> 
 
    <div id=box></div> 
 
    </th> 
 
    <tr> 
 
    <td><input type="checkbox"></td> 
 
    <td>#25526</td> 
 
    <td><img class="Profilepic" src="https://s-media-cache-ak0.pinimg.com/736x/ab/74/5f/ab745f93d3ced17005728d939b7e6afc.jpg" align="center"></img>Maria</td> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>08606060555</td> 
 
    <td>$3663</td> 
 
    <td><button>Active</button></td> 
 
    <td><i class="fa fa-plus-circle" aria-hidden="true" id=more></i></td> 
 
    </tr> 
 

 
</table>

Hier wird die ursprüngliche CSS-Datei ist, erscheint das wird, bevor sie auf dem (#more) Schaltfläche klicken und das, was ich brauche Rückkehr zu sein, wenn der Benutzer klicken Sie erneut darauf.

*{ 
    background-color: #E8EDF2; 
} 

table{ 
    position: absolute; 
    margin-left: 200px; 
    border-collapse: collapse; 

} 
.firstth, td{ 
    padding: 10px; 
    border-bottom: 1px solid #A5A5A5; 
} 
.firstth{ 
    background-color: #9EACB7; 


} 
td{ 
    background-color: White; 
    position:static; 


} 
.Profilepic{ 
    width:42px; 
    height:42px; 
    margin-right:10px; 
    border-radius : 90px; 
    margin-top: -2px; 
} 

button{ 
    background-color: #CEF2CE; 
    color: #339B08; 
    border: 1px solid #339B08; 
    border-radius:20px; 
    font-family : Tahoma; 
    font-size: small; 
    width: 90px; 
    height: 30px; 
} 
#box{ 
    background : #3C4554; 
    height : 136px; 
    display:none; 
} 
th{ 
    color: white; 
    font-family: Helvetica; 
    font-size: small; 
} 

#more1, #more{ 
    background-color: white; 
    color: #109BE8; 
    padding-left: 20px; 
} 

Answer 1

Ich würde vorschlagen, dass Sie eine ID hinzufügen und eine style = "display: none" auf das Element, das Sie ausblenden möchten, dann verwenden Sie die Toggle-Methode für das Element:

<table> 
    <tr> 
    <th class=firstth><input type="checkbox"></th> 
    <th class=firstth>User ID</th> 
    <th class=firstth>User name and Image</th> 
    <th class=firstth>Phone Number</th> 
    <th class=firstth>Last Transaction</th> 
    <th class=firstth>Balance</th> 
    <th class=firstth>Status</th> 
    <th class=firstth>Actions</th> 
    </tr> 
    <tr id="second" style="display:none"> 
    <td class="second"><input type="checkbox"></td> 
    <td class="second">#33225</td> 
    ... 

dann Ihre Javascript-Code sieht so aus:

Es sieht nicht so aus, als gäbe es eine Notwendigkeit, die Stile mit Javascript dynamisch hinzuzufügen/zu entfernen. Lassen Sie sie einfach dort und zeigen/verbergen Sie die Zeile, wenn der Benutzer auf die Schaltfläche klickt.

Answer 2

sollten Sie toggleClass verwenden. Ich habe ein Beispiel gefunden https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass