Question

我一直在玩一个选中的菜单，当用图标点击它时，它会打开/关闭。我没有在CodePen example中添加图标，但已将B替换为汉堡图标，将X替换为关闭图标。

我无法弄清楚当它处于检查状态时它不会从B切换到X的原因，因为导航正常工作。以下是HTML和CSS（使用Sass）的代码。

<!-- nav -->
<nav class="nav" id="menu" role="navigation">

  <!-- nav toggle -->
  <label for="toggle" class="nav--btn">
    <span class="icon--burger" aria-hidden="true">B</span>
    <span class="icon--close" aria-hidden="true">X</span>
    <span class="text">MENU</span>
  </label>

  <input type="checkbox" id="toggle">
  <!-- /nav toggle -->

  <ul class="nav--toggle">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</nav><!-- /nav -->

CSS / Sass

// Toggle
.nav--btn {
  background-color: lightgreen;
  display: block;
  float: left;
  padding: 2em;
  width: 100%;

  &:hover, &:focus {
    background-color: orange;
  }
}

#toggle,
.nav--toggle,
.icon--close,
#toggle:checked + .icon--burger {
  display: none;
}

#toggle:checked + .nav--toggle,
#toggle:checked + .icon--close {
  display: inline;
  transition: all 0.5s ease;
}

.text {
  /* Hide from the website but visible for screen readers */
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

// Navigation Menu
.nav {
  display: block;
  float: left;
  width: 100%;

  > ul {
    text-align: center;

    > li {
      display: block;
      float: left;
      width: 100%;

      background-color: lightgray;
      border-bottom: 2px solid darkgray;

      > a {
        display: block;
        float: left;
        width: 100%;
        padding: 2em 0;
      } // end a
    } // end li
  } // end ul
} // end nav

提前致谢。

Answer 1

在CSS中，+是adjacent sibling combinator：

相邻的兄弟组合器由＆＃34;加号＆＃34; （U + 002B，+）分隔两个简单选择器序列的字符。该由两个序列表示的元素共享同一个父元素文档树和第一个序列表示的元素紧接在第二个元素代表的元素之前。

但你的HTML是

<label for="toggle" class="nav--btn">
  <span class="icon--burger" aria-hidden="true">B</span>
  <span class="icon--close" aria-hidden="true">X</span>
</label>
<input type="checkbox" id="toggle">

因此，这些选择器都不起作用：

#toggle:checked + .icon--burger
#toggle:checked + .nav--toggle

要解决此问题，请将HTM更改为

<input type="checkbox" id="toggle">
<label for="toggle" class="nav--btn">
  <span class="icon--burger" aria-hidden="true">B</span>
  <span class="icon--close" aria-hidden="true">X</span>
</label>

你的CSS

#toggle:checked ~ .nav--btn > .icon--burger {
  display: none;
}
#toggle:checked ~ .nav--toggle,
#toggle:checked ~ .nav--btn > .icon--close {
  display: block;
}

其中~是general sibling combinator。

＆＃13;

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  font-size: 16px;
}
p {
  margin-bottom: 2em;
}
.wrap {
  margin: 2em auto;
  width: 80%;
}
h1 {
  border-bottom: 4px solid #ccc;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 1em;
}
.nav--btn {
  background-color: lightgreen;
  display: block;
  float: left;
  padding: 2em;
  width: 100%;
}
.nav--btn:hover,
.nav--btn:focus {
  background-color: orange;
}
#toggle,
.nav--toggle,
.icon--close,
#toggle:checked ~ .nav--btn > .icon--burger {
  display: none;
}
#toggle:checked ~ .nav--toggle,
#toggle:checked ~ .nav--btn > .icon--close {
  display: block;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.text {
  /* Hide from the website but visible for screen readers */
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.nav {
  display: block;
  float: left;
  width: 100%;
}
.nav > ul {
  text-align: center;
}
.nav > ul > li {
  display: block;
  float: left;
  width: 100%;
  background-color: lightgray;
  border-bottom: 2px solid darkgray;
}
.nav > ul > li > a {
  display: block;
  float: left;
  width: 100%;
  padding: 2em 0;
}

＆＃13;

<div class="wrap">
  <h1>Menu toggle with icon switch</h1>
  <p>Imagine the B for the burger icon and X for the close icon.</p>
  <!-- nav -->
  <nav class="nav" id="menu" role="navigation">
    <!-- nav toggle -->
    <input type="checkbox" id="toggle">
    <label for="toggle" class="nav--btn">
      <span class="icon--burger" aria-hidden="true">B</span>
      <span class="icon--close" aria-hidden="true">X</span>
      <span class="text">MENU</span>
    </label>
    <!-- /nav toggle -->
    <ul class="nav--toggle">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav><!-- /site-nav -->
</div><!-- /wrap -->

＆＃13;

Answer 2

你给public interface AsyncTaskListener<String> { public void onReceivingApiKey(String result); } public class AsyncTaskGetApiKey extends AsyncTask<Void, Void, String>{ ArrayList<AsyncTaskListener<String>> listeners; public AsyncTaskLoadingInSplash() { listeners = new ArrayList<AsyncTaskListener<String>>(); } public void addListener(AsyncTaskListener<String> listener){ listeners.add(listener); } public void removeListener(AsyncTaskListener<String> listener){ listeners.remove(listener); } @Override protected String doInBackground(Void... params) { return httpRequest.getHttpResponse(email,password); } @Override protected void onPostExecute(String result) { // TODO Auto-generated method stub super.onPostExecute(result); for (AsyncTaskListener<String> listener:listeners) { listener.onReceivingApiKey(result); } } } public class MyActivity extends Activity implements AsyncTaskListener<String>{ AsyncTaskGetApiKey task; @Override protected void onCreate(Bundle savedInstanceState) { task = new AsyncTaskGetApiKey(); task.addListener(this); } @Override public void onReceivingApiKey(String result) { //use the returned value } }的方式是错误的。你不能去前一个元素。 B 和 X 图标位于<input />元素之前。您需要像这样重写HTML：

<强>解决方案

<input />

#check {display: none;}
label {display: inline-block; cursor: pointer; background: #ccf; padding: 10px;}
#check:checked + .menu .button-click .b,
#check + .menu .menu-items,
#check + .menu .button-click .x {display: none;}
#check:checked + .menu .button-click .x,
#check:checked + .menu .menu-items {display: block;}

<强>原因：

同级选择器无法以这种方式工作：

<input type="checkbox" id="check" />
<div class="menu">
  <label class="button-click" for="check">
    <span class="b">B</span>
    <span class="x">X</span>
  </label>
  <ul class="menu-items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

：选中不切换切换图标

2 个答案: