我在Wordpress / Woocommrece产品说明的底部添加了营养信息表。
我试图将其隐藏起来，并为客户提供显示表格的选项。
目前，我可以隐藏和显示表格之前的信息，即-300克，10份...但是表格始终可见。
我的代码：
.nutrition-read-more-state {
display: none;
}
.nutrition-read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.nutrition-read-more-state:checked ~ .nutrition-read-more-wrap .nutrition-read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.nutrition-read-more-state ~ .nutrition-read-more-trigger:before {
content: 'Show more';
}
.nutrition-read-more-state:checked ~ .nutrition-read-more-trigger:before {
content: 'Show less';
}
.nutrition-read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}<div><input id="post-2" class="nutrition-read-more-state" type="checkbox" />
<div class="nutrition-read-more-wrap">
<h2>Brand - Product - Product type - Nutrition Information</h2>
<span class="nutrition-read-more-target">
Size: 300g
Serving size: 10g
Servings per container: 30</p>
<table class="tg" style="width: 30%;">
<tbody>
<tr>
<th class="tg-yw4l"></th>
<th class="tg-baqh">Per Serving</th>
<th class="tg-baqh">% of RI</th>
</tr>
<tr>
<td class="tg-bd4c" colspan="3">sub-head</td>
</tr>
<tr>
<td class="tg-yw4l">
<div style="color: #3b3d3e;">ingredient</div></td>
<td class="tg-baqh">2.5g</td>
<td class="tg-baqh"></td>
</tr>
<tr>
<td class="tg-siak">ingredient</td>
<td class="tg-om3m">2g</td>
<td class="tg-om3m"></td>
</tr>
<tr>
<td class="tg-yw4l">ingredient</td>
<td class="tg-baqh">2g</td>
<td class="tg-baqh"></td>
</tr>
<tr>
<td class="tg-siak">ingredient</td>
<td class="tg-om3m">120mg</td>
<td class="tg-om3m">15%</td>
</tr>
<tr>
<td class="tg-yw4l">ingredient</td>
<td class="tg-baqh">60mg</td>
<td class="tg-baqh">16%</td>
</tr>
<tr>
<td class="tg-bd4c" colspan="3">Sub head</td>
</tr>
<tr>
<td class="tg-yw4l">ingredient</td>
<td class="tg-baqh"> 500mg</td>
<td class="tg-baqh"></td>
</tr>
<tr>
<td class="tg-siak">ingredient</td>
<td class="tg-om3m"> 300mg</td>
<td class="tg-om3m"></td>
</tr>
<tr>
<td class="tg-yw4l">Caffeine</td>
<td class="tg-baqh"> 200mg</td>
<td class="tg-baqh"></td>
</tr>
<tr>
<td class="tg-siak">ingredient</td>
<td class="tg-om3m"> 200mg</td>
<td class="tg-om3m"></td>
</tr>
<tr>
<td class="tg-bd4c" colspan="3">ingredient</td>
</tr>
<tr>
<td class="tg-siak">ingredient</td>
<td class="tg-om3m"> 2.2mg</td>
<td class="tg-om3m"> 200</td>
</tr>
<tr>
<td class="tg-yw4l">ingredient</td>
<td class="tg-baqh"> 2.8mg</td>
<td class="tg-baqh"> 200</td>
</tr>
<tr>
<td class="tg-siak">ingredient</td>
<td class="tg-om3m"> 48mg</td>
<td class="tg-om3m"> 300</td>
</tr>
<tr>
<td class="tg-yw4l">ingredient</td>
<td class="tg-baqh"> 12mg</td>
<td class="tg-baqh"> 200</td>
</tr>
<tr>
<td class="tg-le8v" colspan="3">
<div style="color: #3b3d3e;"><span style="font-weight: bold; color: #000000;">Other Ingredients</span></div>
<div style="color: #3b3d3e;"><span style="color: #000000;">Beta-Alanine, Creatine Monohydrate, L-Arginine, Citric Acid (Acidity Regulator), L-Tyrosine, Minerals (Tricalcium Phosphate, Magnesium Carbonate), Extract of Bitter Orange Fruit (Citrus Aurantium), Flavour, Caffeine Raspberry Ketone, Silicone Dioxide (Anti-Caking Agent), Vitamins (Thiamine Mononitrate, Riboflavin, Nicotinic Acid, Calcium Pantothenate, Pyridoxine Hydrochloride, D-Biotin, Folic Acid, Cyanocobalamin), Acesulfame K & Sucralose (Sweeteners), Cochineal & Brilliand Blue (Colourants)</span></div>
<div style="color: #3b3d3e;"><span style="font-weight: bold; color: #000000;"> </span></div>
<div style="color: #3b3d3e;"><span style="font-weight: bold; color: #000000;">Recommended Use</span></div>
<div style="color: #3b3d3e;"><span style="color: #000000;">One serving (10g - 2 teaspoons) dissolved in 200 ml of water Use once a day before training</span></div>
<div style="color: #3b3d3e;"><span style="color: #000000;"> </span></div>
<div style="color: #3b3d3e;"><span style="font-weight: bold; color: #000000;">Warning</span></div>
<div style="color: #3b3d3e;"><span style="color: #000000;">Do not exceed recommended servings for consumption during the day Food supplements should not be used as a substitute for a varied diet Contains caffeine is not recommended for use in children and pregnant women</span></div></td>
</tr>
</tbody>
</table>
</span>
</div>
<label class="nutrition-read-more-trigger" for="post-2"></label></div>
此代码段在此处和代码笔上都可以正常运行，但在我的网站上却不行。任何帮助都会很棒。我试图将其保留在CSS上，因为我发现wordpress网站的插件中的Java脚本超载了，这往往会降低它的速度
答案 0 :(得分：0)