jQueryがCSSリセットを切り替えますか？

Question

私はCSSを切り替えるので、ユーザーがボタンをクリックすると（＃more1）CSSが変更され、ボタンをもう一度クリックすると（＃more1）、CSSが元に戻ります。ここで

$(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>

オリジナルのCSSファイルで、その意志は（#more）ボタンをクリックする前に、私は再びそれにするとき、ユーザーのクリックを返却するために必要なものと思われます。

*{ 
    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

私はあなたのIDとスタイル=「表示：なし」を追加示唆している：あなたのその後

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

その後、非表示にしたい要素に、その要素にトグルメソッドを使用しますjavacriptコードは次のようになります：

$(document).ready(function() { 
    $("#more1").click(function() { 
    $("#second").toggle(); 
    }) 
}) 

javascriptを使用してスタイルを動的に追加/削除する必要はありません。ボタンをクリックするだけで、行を表示/非表示にすることができます。

Answer 2

あなたはtoggleClassを使用する必要があります。例を見つけたhttps://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass