javascript - 如何更改html中复选框的对齐方式

Question

我在更改 html 中复选框的对齐方式时遇到问题。

这是我的 HTML:

<ol id="menutree">
  <li>

    <label class="menu_label" for="c1">Menu Gen14 Am0a1</label>
    <input type="checkbox" id="c1" />                             <!-- input must follow label for safari -->
    <ol>
      <li>
        <label for="c2" class="menu_label">Menu Am1a1</label>
        <input type="checkbox" id="c2" />
        <ol>
          <li class="page"><a href="#">Page Ap1a1</a></li>
          <li class="page"><a href="#">Page Ap1a2</a></li>
          <li class="page"><a href="#">Page Ap1a3</a></li>
        </ol>
      </li>
      <li>
        <label for="c3" class="menu_label">Menu Am1b1</label>
        <input type="checkbox" id="c3" />
        <ol>
          <li class="page"><a href="#">Page Ap1b1</a></li>

          <li>
            <label for="c4" class="menu_label">Menu Am2b1 </label>
            <input type="checkbox" id="c4" />
            <ol>
              <li class="page"><a href="#">Page Ap2b1</a></li>
            </ol></li>
        </ol></li>
    </ol></li>

  <li>
    <label class="menu_label" for="c5">Menu Bm0a1</label>
    <input type="checkbox" id="c5" />
    <ol>
      <li>
        <label for="c6" class="menu_label">Menu Bm1a1</label>
        <input type="checkbox" id="c6" />
        <ol>
          <li class="page"><a href="#">Page Bp1a1</a></li>
        </ol>
      </li>
      <li>
        <label for="c7" class="menu_label">Menu Bm1b1</label>
        <input type="checkbox" id="c7" />
        <ol>
          <li class="page"><a href="#">Page Bp1b1</a></li>
          <li>
            <label for="c8" class="menu_label">Menu Bm2b1</label>
            <input type="checkbox" id="c8" />
            <ol>
              <li class="page"><a href="#">Page Bp2b1</a></li>
            </ol></li>
        </ol></li>
    </ol></li>

</ol>

我的CSS是

#menutree li {
   list-style: none;          /* all list item li dots invisible */
         }

   li .menu_label + input[type=checkbox] {
      opacity: 2;             /* checkboxes invisible and use no space */
     }                        /* display: none; is better but fails in ie8 */

    li .menu_label {
      cursor: pointer;        /* cursor changes when you mouse over this class */
    }                         /* could add the many user-select: none; commands here */

      li .menu_label + input[type=checkbox] + ol > li
         {
            display: none;         /* prevents sublists below unchecked labels from displaying */
         }

      li .menu_label + input[type=checkbox]:checked + ol > li
         {
           display: block;         /* display submenu on click */
         }

现在的问题是复选框显示在标签之后，我需要标签之前的复选框。

那么谁能帮我解决这个问题？？

注意:在标签前显示复选框后，功能应该像以前一样工作......

谢谢。

我在这里附上 jsfiddle 链接 jsfiddle

Answer 1

此技术通过使用相邻兄弟组合器 + 来工作，因此对于

input[type=checkbox] + foo

要工作，元素 foo 必须紧跟在 input 元素之后。如果您颠倒 HTML 中 input 和 label 的顺序，则不再满足该条件。

但是您可以通过将这些选择器部分更改为来纠正此问题

input[type=checkbox] + label + foo

这样你就可以拥有像这样的 HTML 结构

<input>
<label>
<foo>

相反，检查的输入仍然会影响 foo 元素或其后代的样式。
它不再应用于直接跟在 input 之后的 foo 元素，它现在应用于直接跟在 label 之后的 foo直接跟在 input 之后——同样的原则，只是在中间插入了“一步”。

我在这里修改了你的 fiddle 以表明它在行动:http://jsfiddle.net/6LKc6/302/

(您的原始 fiddle 在 HTML 面板中包含一个完整的 HTML 文档，尽管这不是必需的，但会适得其反。下次请遵守 jsfiddle 在插入完整的 HTML 文档时向您显示的警告, 并且只输入正文内容。)

您的原始 fiddle 在输入字段后包含注释，

<input type="checkbox" id="c1" /> <!-- input must follow label for safari -->

– 我不知道那是什么意思，而且我现在没有简单的方法在 Safari 中进行测试，所以请自行测试以确保修改后的版本仍能按预期工作。
(我知道某些浏览器的某些旧版本在像这样一起使用伪类和相邻兄弟组合器时通常会出现问题——但如果这在这里是相关的，那么原始版本很可能一开始就不会在这些浏览器中工作.)