所以我试图让我的切换按钮工作,但我遇到了一个恼人的问题。 首先,我找到了一个使用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>
&#13;
但是,点击它时我不希望两个按钮都展开。我需要他们分开扩展!
答案 0 :(得分:2)
使用
的同一级别的下一个元素$(this).next(SELECTOR)
选择匹配selector
$(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>