如果用户单击出现按钮的区域，则“ 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};&nbsp;和{display：block}处理显示/隐藏动作。从样式中删除opacity：0和opacity：1，并替换display：none和display：block样式。