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

그런 다음 자바 스크립트 코드는 다음과 같습니다 :

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

동적으로 자바 스크립트를 사용하여 스타일을 추가/제거 할 필요가없는 것처럼 보입니다. 그냥 거기에두고 사용자가 버튼을 클릭하면 행을 표시하거나 숨 깁니다.

Answer 2

toggleClass를 사용해야합니다. 예제를 찾았습니다 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass