html区域隐藏 点击后显示,如果用户单击出现按钮的区域，则“ HTML隐藏”按钮仍可单击...

我使用复选框在HTML / CSS中创建了一个临时的隐藏/显示菜单，它非常适合隐藏和显示文本和链接，但是我有一个部分要单击“复选框”时显示一个按钮。首先，它看起来不错，按钮是隐藏的，当用户单击复选框时，按钮将显示在其下方。我遇到的问题是，如果用户在按钮实际出现之前在该按钮出现的复选框下方单击，他们仍然可以触发该按钮。任何想法？

Edit

>

Delete

function confirm_delete() {

return confirm("Are you sure you wish to delete that?");

}

这是我的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;

}