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

然後你javascript代碼如下所示：

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

看起來好像不需要使用JavaScript動態添加/刪除樣式。只需將它們留在那裏，並在用戶單擊按鈕時顯示/隱藏該行。

Answer 2

您應該使用toggleClass。找到你一個例子https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass