CSS 汉堡下拉菜单使用 :check not working

Question

我正在尝试使用带有复选框 hack 的汉堡包图标来实现移动下拉菜单，我发现了几个这样的例子。这是一个使用带标签的 radio jsfiddle .我知道这基本上是相同的想法，并且我在此页面上看到了其他示例 css-tricks .问题是我已经尝试了几乎所有的组合来让它工作，但它不会。有人可以看看我的代码中是否缺少某些东西吗？请注意，我使用 hamburger 一词代替字形字符，因为它不可用。

.nav .mobile-bar label:before {
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  position: relative;
  content: "Hamburger";
  left: 24px;
  color: #000;
}
input[type="checkbox"]:checked ~ label ~ ul {
  display: block;
}
.nav ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="col-xs-12 nav">
  <div class="mobile-bar">
    <label for="hamburger">
      <input type="checkbox" id="hamburger">
    </label>
  </div>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#">ABOUT US</a>
    </li>
    <li class="page_item_has_children"><a href="#">SERVICES</a>
      <ul>
        <li><a href="#">WEB SITES</a>
        </li>
        <li><a href="#">PRINT GRAPHICS</a>
        </li>
        <li><a href="#">VIDEO</a>
        </li>
      </ul>
      <li><a href="#">BLOG</a>
      </li>
      <li><a href="#">CONTACT US</a>
      </li>
  </ul>
</div>

Answer 1

无法通过纯 css 选择父元素。

解决方案:

改变html结构

Jsfiddle

.nav .mobile-bar label:before {
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  position: relative;
  content: "Hamburger";
  left: 24px;
  color: #000;
}
input[type="checkbox"]:checked ~ ul {
  display: block;
}
.nav ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="col-xs-12 nav">
  <input type="checkbox" id="hamburger" />
  <div class="mobile-bar">
    <label for="hamburger">

    </label>
  </div>
  <ul>
    <li><a href="#">HOME</a>

    </li>
    <li><a href="#">ABOUT US</a>

    </li>
    <li class="page_item_has_children"><a href="#">SERVICES</a>

      <ul>
        <li><a href="#">WEB SITES</a>

        </li>
        <li><a href="#">PRINT GRAPHICS</a>

        </li>
        <li><a href="#">VIDEO</a>

        </li>
      </ul>
      <li><a href="#">BLOG</a>

      </li>
      <li><a href="#">CONTACT US</a>

      </li>
  </ul>
</div>

Jquery

Jsfiddle

$(document).ready(
  function() {
    $('#hamburger').click(function() {
      $(this).closest('.mobile-bar').toggleClass('selected');
    });
  });

.nav .mobile-bar label:before {
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  position: relative;
  content: "Hamburger";
  left: 24px;
  color: #000;
}
.nav ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav .selected + ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="col-xs-12 nav">

  <div class="mobile-bar">
    <label for="hamburger">
      <input type="checkbox" id="hamburger" />
    </label>
  </div>
  <ul>
    <li><a href="#">HOME</a>

    </li>
    <li><a href="#">ABOUT US</a>

    </li>
    <li class="page_item_has_children"><a href="#">SERVICES</a>

      <ul>
        <li><a href="#">WEB SITES</a>

        </li>
        <li><a href="#">PRINT GRAPHICS</a>

        </li>
        <li><a href="#">VIDEO</a>

        </li>
      </ul>
      <li><a href="#">BLOG</a>

      </li>
      <li><a href="#">CONTACT US</a>

      </li>
  </ul>
</div>