所以我试图让我的切换按钮工作，但我遇到了一个烦人的问题。 首先，我找到了一个使用 bootstrap 的解决方案，但我使用的网站框架不支持 bootstrap，所以就是这样。
目前我有这个
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- CSS -->
<style>
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: #FFD300;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
.button {
border:1px solid #d7dada; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;color: #000000;
background-color: #f4f5f5; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);
}
</style>
</head>
<body>
<!-- HTML -->
<table class="myTable">
<tr>
<th>Assignment</th>
<th>Points</th>
<th>Assignment</th>
<th>Points</th>
</tr>
<tr>
<td>Some text
<button class = "button">Read more</button>
<p style="display: none" align = "justify">Some Explanation
</p>
<td> 5</td>
<td>Some other text
<button class = "button">Read more</button>
<p style="display: none" align = "justify">Other Explanation
</p>
<td> 5</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</table>
</body>
</html>但是，我不希望两个按钮在单击时都展开。我需要他们单独扩展!
最佳答案
Use
$(this).next(SELECTOR)to select next element of the same level with matchedselector
$(document).ready(function() {
$("button").click(function() {
$(this).next("p").toggle();
});
});.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: #FFD300;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
vertical-align: top;
}
.button {
border: 1px solid #d7dada;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
padding: 10px 10px 10px 10px;
text-decoration: none;
display: inline-block;
color: #000000;
background-color: #f4f5f5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f4f5f5, endColorstr=#dfdddd);
}
</s<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="myTable">
<tr>
<th>Assignment</th>
<th>Points</th>
<th>Assignment</th>
<th>Points</th>
</tr>
<tr>
<td>Some text
<button class="button">Read more</button>
<p style="display: none" align="justify">Some Explanation
</p>
<td>5</td>
<td>Some other text
<button class="button">Read more</button>
<p style="display: none" align="justify">Other Explanation
</p>
<td>5</td>
</tr>
</table>关于javascript - 多个切换按钮html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35828998/