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和style =“display：none”，然后对该元素使用toggle方法：

<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

jQuery切换CSS重置？

2 个答案: