Question

我有两个UL部分，第一部分默认我设置为display：none;并将其更改为显示：阻止然后将第二个设置为display：none;基于选择输入的变化。

每个列表项中的

都是一个复选框和一个标签标记。

出于某种原因，当第一个列表被隐藏时，任何长度都会向下移动，另一个显示列表不允许我单击复选框的标签来选择它。

所以在下面，如果我在我的CSS中设置#first {display：none;}那么我就不能使用＃34;第二选项1＆＃34;选中其复选框。复选框本身仍然按预期运行。

我尝试将z-index应用于标签，但它似乎没有任何影响。我还没有尝试在负面位置移动列表，但只是好奇我是否必须处理它或者我错过了什么。

显然，与我所拥有的其他标记相比，下面的来源是最小的，因此它可能与影响它的另一部分完全相关。

浏览器是IE9。

<div id="barcodes">
 <ul id="first">
    <li>
      <input type="checkbox" name="1" id="1" />
      <label for="1">First Option 1</label>
    </li>
 </ul>
 <ul id="second">
    <li>
      <input type="checkbox" name="1" id="1" />
      <label for="1">Second Option 1</label>
    </li>
    <li>
      <input type="checkbox" name="2" id="2" />
      <label for="2">Second Option 2</label>
    </li>
 </ul>
</div>

编辑反映我的实际代码我遇到了问题。

Answer 1

DEMO

#first :first-child {
    display:none;
}

Answer 2

您在复选框类型上缺少"，这可能导致此混乱。

作品：http://jsbin.com/dolegada/1/edit

Answer 3

抱歉，通过我在下面查看的两个小提琴选项找到了我的问题。朝着正确的方向前进。

问题实际上与我在上面的标记中没有的ID标签有关。

<input type="checkbox" name="1" id="1" />

我的页面实际上有以下标记。

http://jsfiddle.net/mAGf4/

我忘记了我复制了另一个列表的子部分并添加了内容。

我的第一个隐藏的UL设置为display：none;影响第二个UL

3 个答案: