在选中的输入上更改标签的背景图像

时间:2014-11-06 21:55:29

标签: javascript html css

我使用this source中的代码构建了一个CSS可折叠树结构。我做了一些修改以删除" +"和" - "图像,因为它不按顺序抛出格式,并决定使用另一个文件夹图像(一个打开的)like so显示树的扩展部分。

我尝试使用〜选择器在CSS中执行此操作,但它不起作用,因为标签在其关联输入之前是正确的。我无法切换它,因为树不会按预期扩展/收缩。

我正在探索使用Javascript的可能性,但由于我有大约300个标签 - 复选框对,因此使用getElementbyID获取我试图修复的确切标签似乎不太可行。有更简单的方法吗?

HTML代码:

<ol class="tree">
   <li>
      <label for="CB1">Label1</label><input type="checkbox" id="CB1" />
      <ol>
         <li class="file">File 1</li>
         <li class="file">File 2</li>
         <li class="file">File 3</li>
      </ol>
   </li>
</ol>

CSS代码:

ol.tree li.file a
    {
        background: url(../images/document.png) 0 0 no-repeat;
        color: #2D629A;
        padding-left: 21px;
        text-decoration: none;
        display: block;
    }
ol.tree li input
{
    position: absolute;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0;
}
ol.tree li label
{
    background: url(../images/folder-horizontal.png) 15px 1px no-repeat;
    cursor: pointer;
    display: block;
    padding-left: 37px;
}

ol.tree li input:checked ~ label
{
    background: url(../images/folder-open.png) 40px 5px no-repeat;
}

1 个答案:

答案 0 :(得分:2)

首先,<input>元素位于错误的位置 它必须之前标签才能发挥作用。

其次,要使其正常工作,您需要将<ol>设置为隐藏,然后在检查<input>时显示它。

生成的html:

<ol class="tree">
   <li>
      <input type="checkbox" id="CB1" /><label for="CB1">Label1</label>
      <ol>
         <li class="file">File 1</li>
         <li class="file">File 2</li>
         <li class="file">File 3</li>
      </ol>
   </li>
</ol>

新的CSS:

ol.tree ol 
{
    display:none;
}
ol.tree li.file a
{
    background: url(../images/document.png) 0 0 no-repeat;
    color: #2D629A;
    padding-left: 21px;
    text-decoration: none;
    display: block;
}
ol.tree li input
{
    position: absolute;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0;
}
ol.tree li label
{
    background: url(../images/folder-horizontal.png) 15px 1px no-repeat;
    cursor: pointer;
    display: block;
    padding-left: 37px;
}

ol.tree li input:checked ~ label
{
    background: url(../images/folder-open.png) 40px 5px no-repeat;
}

ol.tree li input:checked ~ ol
{
    display:block;
}

在此处查看此行动:http://jsfiddle.net/mjx8t596/1/

<强>通知

我没有触及图像:我保持相同的路径并且没有更改代码中的任何其他内容。