多个切换按钮的HTML [英] Multiple toggle buttons html
本文介绍了多个切换按钮的HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
首先我找到了一个使用bootstrap的解决方案，但是我使用的网站框架不支持引导程序，所以就是这样。
目前我有这个
<！DOCTYPE html> < HTML> < HEAD> <标题物实施例< /标题> <！ - CSS - > <风格> .myTable {width：100％; text-align：left; background-color：lemonchiffon;边界崩溃：崩溃; } .myTable th {background-color：＃FFD300;白颜色; } .myTable td，.myTable th {padding：10px; border：1px solid goldrod; } .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;文字修饰：无; display：inline-block; color：＃000000; background-color：＃f4f5f5; background-image：-webkit-gradient（线性，左上，左下，从（＃f4f5f5）到（#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：线性渐变（至底部，＃f4f5f5，#dfdddd）; filter：progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr =＃f4f5f5，endColorstr =＃dfdddd）; }< / style> < /头> <身体GT; <！ - HTML - > < table class =myTable> < TR> <的第i;转让< /第> <的第i;积分和LT; /第> <的第i;转让< /第> <的第i;积分和LT; /第> < / TR> < TR> < td>一些文字< button class =button>了解更多< / button> < p style =display：nonealign =justify>一些解释< / p> < TD> 5℃; / TD> < td>其他一些文字< button class =button>了解更多< / button> < p style =display：nonealign =justify>其他解释< / p> < TD> 5℃; / TD> < / TR> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js>< / script> <脚本> $（document）.ready（function（）{$（button）。click（function（）{$（p）。toggle（）;}）;}）; < /脚本> < /表> < /体> < / html>
然而，我不希望点击按钮以展开。我需要他们分别扩大！
解决方案
使用
$（this）.next（SELECTOR） code>选择匹配选择器
$（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 goldrod; 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;文字修饰：无;显示：inline-block;颜色：＃000000; background-color：＃f4f5f5; background-image：-webkit-gradient（线性，左上，左下，从（＃f4f5f5）到（#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：线性渐变（至底部，＃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> <的第i;转让< /第> <的第i;积分和LT; /第> <的第i;转让< /第> <的第i;积分和LT; /第> < / TR> < TR> < td>一些文字< button class =button>了解更多< / button> < p style =display：nonealign =justify>一些解释< / p> < TD> 5℃; / TD> < td>其他一些文字< button class =button>了解更多< / button> < p style =display：nonealign =justify>其他解释< / p> < TD> 5℃; / TD> < / table>
So I am trying to get my toggle buttons to work but I encountered an annoying problem. First off I found a solution using bootstrap, but the website framework I'm using doesn't support bootstrap so there's that.
Currently I have this
<!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>
However, I don't want both buttons to expand when clicking on it. I need them to expand separately!
解决方案
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>
这篇关于多个切换按钮的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
