css - 为什么我的响应式 WordPress 导航的切换按钮不起作用？

Question

我已经在我正在处理的自定义 WordPress 4.x 版本上实现了响应式导航。当我在常规 HTML 文档中单独测试导航时，它工作正常。然而，在 WordPress 网站上，它不起作用。在移动设备上显示导航的切换按钮未切换。

这是工作 HTML 版本的 jsfiddle:http://jsfiddle.net/86jy78q0/

这是网站:http://pow.digitaldemo.net/

这是我的菜单的 HTML 结构:

    /* Top Navigation */
    .nav {
      max-width: 100%;
      min-width: 535px;
      float: right;
    }
    /*Strip the ul of padding and list styling*/
    .nav ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      background: #ffffff;
      position: absolute;
    }
    /*Create a horizontal list with spacing*/
    .nav li {
      display: inline-block;
      float: left;
    }
    /*Style for menu links*/
    .nav li a {
      padding: 0 15px;
      font-family: "Conv_GothamMedium", helvetica, sans-serif;
      font-size: 12px;
      font-weight: normal;
      color: #000000;
      background: #ffffff;
      display: block;
      height: 20px;
      text-align: center;
      line-height: 20px;
      text-transform: uppercase;
    }
    /*Hover state for top level links*/
    .nav li:hover a {
      background: #eeeeee;
    }
    /*Style for dropdown links*/
    .nav li:hover ul.sub-menu a {
      background: #ffffff;
      color: #000000;
      height: 24px;
      line-height: 24px;
    }
    /*Hover state for dropdown links*/
    .nav li:hover ul.sub-menu a:hover {
      background: #eeeeee;
    }
    /*Hide dropdown links until they are needed*/
    .nav li ul {
      display: none;
    }
    /*Make dropdown links vertical*/
    .nav li ul.sub-menu li {
      display: block;
      float: none;
    }
    /*Prevent text wrapping*/
    .nav li ul.sub-menu li a {
      width: auto;
      min-width: 100px;
      padding: 0 20px;
      background: #eeeeee;
      border-top: 1px solid #d1d1d1;
    }
    /*Display the dropdown on hover*/
    .nav ul li a:hover + .sub-menu,
    .sub-menu:hover {
      display: block;
    }
    /*Style 'show menu' label button and hide it by default*/
    .show-menu {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-decoration: none;
      color: #000000;
      background: #eeeeee;
      border-radius: 4px;
      border: 1px solid #cccccc;
      text-align: center;
      padding: 10px 0;
      display: none;
    }
    /*Hide checkbox*/
    input[type=checkbox] {
      display: none;
    }
    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ .menu {
      display: block;
    }
    @media (max-width: 820px) {
      /*Make dropdown links appear inline*/
      div.nav {
        min-width: 100%
      }
      .nav ul {
        position: static;
        display: none;
      }
      /*Create vertical spacing*/
      .nav li {
        margin-bottom: 1px;
      }
      /*Make all menu links full width*/
      .nav ul li,
      li a {
        width: 100%;
      }
      /*Display 'show menu' link*/
      .show-menu {
        display: block;
      }
    }

<div class="nav">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <div class="menu-top-navigation-container">
    <ul id="menu-top-navigation" class="menu">
      <li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-7"><a href="http://pow.digitaldemo.net/">Home</a>
      </li>
      <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://pow.digitaldemo.net/about-us/">About Us</a>
      </li>
      <li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-12"><a href="http://pow.digitaldemo.net/category/products/">Products</a>
        <ul class="sub-menu">
          <li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="http://pow.digitaldemo.net/category/products/subcat-1/">Subcat 1</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://pow.digitaldemo.net/retailers/">Retailers</a>
      </li>
      <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://pow.digitaldemo.net/press/">Press</a>
      </li>
      <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://pow.digitaldemo.net/contact-us/">Contact</a>
      </li>
    </ul>
  </div>
</div>

我这辈子都弄不明白为什么移动菜单不切换。

感谢任何帮助!

最好的，

辛西娅

Answer 1

勾选时显示的路径不正确，只需要添加新的div类:

input[type=checkbox]:checked ~ .menu-top-navigation-container #menu-top-navigation {
  display: block;
}

/* Top Navigation */

.menu-top-navigation-container {
  overflow: auto;
}
.nav {
  max-width: 100%;
  min-width: 535px;
  float: right;
}
/*Strip the ul of padding and list styling*/

.nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  position: absolute;
}
/*Create a horizontal list with spacing*/

.nav li {
  display: inline-block;
  float: left;
}
/*Style for menu links*/

.nav li a {
  padding: 0 15px;
  font-family: "Conv_GothamMedium", helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #000000;
  background: #ffffff;
  display: block;
  height: 20px;
  text-align: center;
  line-height: 20px;
  text-transform: uppercase;
}
/*Hover state for top level links*/

.nav li:hover a {
  background: #eeeeee;
}
/*Style for dropdown links*/

.nav li:hover ul.sub-menu a {
  background: #ffffff;
  color: #000000;
  height: 24px;
  line-height: 24px;
}
/*Hover state for dropdown links*/

.nav li:hover ul.sub-menu a:hover {
  background: #eeeeee;
}
/*Hide dropdown links until they are needed*/

.nav li ul {
  display: none;
}
/*Make dropdown links vertical*/

.nav li ul.sub-menu li {
  display: block;
  float: none;
}
/*Prevent text wrapping*/

.nav li ul.sub-menu li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
  background: #eeeeee;
  border-top: 1px solid #d1d1d1;
}
/*Display the dropdown on hover*/

.nav ul li a:hover + .sub-menu,
.sub-menu:hover {
  display: block;
}
/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #000000;
  background: #eeeeee;
  border-radius: 4px;
  border: 1px solid #cccccc;
  text-align: center;
  padding: 10px 0;
  display: none;
}
/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ .menu-top-navigation-container #menu-top-navigation {
  display: block;
}
@media (max-width: 820px) {
  /*Make dropdown links appear inline*/
  div.nav {
    min-width: 100%
  }
  .nav ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  .nav li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  .nav ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
}

<div class="nav">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <div class="menu-top-navigation-container">
    <ul id="menu-top-navigation" class="menu">
      <li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-7"><a href="http://pow.digitaldemo.net/">Home</a>
      </li>
      <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://pow.digitaldemo.net/about-us/">About Us</a>
      </li>
      <li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-12"><a href="http://pow.digitaldemo.net/category/products/">Products</a>
        <ul class="sub-menu">
          <li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="http://pow.digitaldemo.net/category/products/subcat-1/">Subcat 1</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://pow.digitaldemo.net/retailers/">Retailers</a>
      </li>
      <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://pow.digitaldemo.net/press/">Press</a>
      </li>
      <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://pow.digitaldemo.net/contact-us/">Contact</a>
      </li>
    </ul>
  </div>
</div>