如果用户单击出现按钮的区域，则“ HTML隐藏”按钮仍可单击

Question

我使用复选框在HTML / CSS中创建了一个临时的隐藏/显示菜单，它非常适合隐藏和显示文本和链接，但是我有一个部分要单击“复选框”时显示一个按钮。首先，它看起来不错，按钮是隐藏的，当用户单击复选框时，按钮将显示在其下方。我遇到的问题是，如果用户在按钮实际出现之前在该按钮出现的复选框下方单击，他们仍然可以触发该按钮。任何想法？<td><label class="collapsible"><input type="checkbox" /><span class="collapser">Edit</span><span class="arrow">&gt;</span><div class="collapsed"><form method="post"><input type="hidden" id="pwd" name="deleteid" value='. $value["id"] . '><button onclick="return confirm_delete();" type="submit" name="DelBidSubmit" class="btn btn-default">Delete</button><script type="text/javascript">    function confirm_delete() {        return confirm("Are you sure you wish to delete that?");    }</script></form></div></label></td>这是我的CSS代码，以防万一.collapsible {  display: block;  margin-bottom: 1rem;}.collapsible input {  position: absolute;  left: -9999px;}.collapsible input:focus ~ .collapser {  border-color: grey;}.collapsible .collapser {  cursor: pointer;  border: 1px transparent dotted;}.collapsible .arrow {  float: right;  margin-left: 0.5em;  display: inline-block;  transform: rotate(90deg);  transition: transform 0.25s ease-out;}.collapsible input:checked ~ .arrow,.collapsible input:checked ~ .collapser .arrow {  transform: rotate(270deg);}.collapsible .collapsed {  font-size: 0;  margin: 0;  opacity: 0;  padding: 0;  /* fade out, then shrink */  transition: opacity 0.25s, margin 0.5s 0.25s, font-size 0.5s 0.25s, padding 0.5s 0.25s;}.collapsible input:checked ~ .collapsed {  font-size: 12px;  opacity: 1;  height: auto;  padding: 5px 0;  /* grow, then fade in */  transition: margin 0.25s, padding 0.25s, font-size 0.25s, opacity 0.5s 0.25s;}

Answer 1

我认为您必须使用{display：none}; 和{display：block}处理显示/隐藏动作。从样式中删除opacity：0和opacity：1，并替换display：none和display：block样式。