按钮和滑动菜单

Question

除非有解决方法，否则为什么标签标签内的输入标签不能正常工作而标签标签之外的输入标签有效？

这会导致向左滑动，因为输入标签位于标签标签之外。

<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label id="menuButton" for="nav-trigger"></label> 

虽然这不会导致div向左滑动，因为输入标签位于label标签内，但是我添加了一个复选框以确保它正常工作但没有运气。

<label id="menuButton" for="nav-trigger">
    <input type="checkbox" id="nav-trigger" class="nav-trigger"/>
</label>

Jsfiddle（输入外部标签标签有效）：https://jsfiddle.net/dxs6040/4ovp3zty/3/

Jsfiddle（在label标签内输入不起作用）：https://jsfiddle.net/dxs6040/hbtho680/6/

Answer 1

我相信这是因为你的CSS。如果你的目标输入元素是这样的.nav-trigger：checked + label，那么在选中复选框之后的第一个标签元素。如果您更改HTML中的顺序，则此功能不再有效。