html - CSS移动导航

Question

我在准备移动导航时遇到了一些困难。使用下面的代码，我试图实现一些带有菜单项的基本下拉列表。

问题是这个导航是基于悬停属性而不是点击属性。因此，当我使用移动设备单击菜单时，我会同时单击其中的一个菜单项。 (因为我相信没有办法用手指悬停 :D )我可以仅使用 CSS 以某种方式模拟点击行为吗？或者任何简单的方法来更改我的代码以使用 js？

http://jsfiddle.net/hr6e69kp/

我有以下 HTML:

<div class="menu">
    <ul class="menuLinks">
        <li>
            <a href="#O-nas" id="aboutUsLink">O nas</a>
        </li>
        <li>
            <a href="#Aktualnosci" id="newsLink">Aktualności</a>
        </li>
        <li>
            <a href="#Klienci-i-Partnerzy" id="clientsAndPartnersLink">Klienci i Partnerzy</a>
        </li>
        <li>
            <a href="#Media" id="mediaLink">Media</a>
        </li>
        <li>
            <a href="#Kontakt" id="contactLink">Kontakt</a>
        </li>
    </ul>
</div>

和 CSS:

@media (max-width: 470px) {
   .menu {
      position: relative;
      min-height: 40px;
      z-index:10;
   }

   .menu ul {
      background:url("/Images/iconmonstr-menu-icon-128.png") no-repeat;
      width: 80px;
      height:40px;
      padding: 5px 0;
      position: absolute;
      top: 0;
      left: 0;
      left: -100px;
      color: white;
   }

    .menu li {
      display: none; /* hide all <li> items */
      margin: 0;
      color: #0096ff;
   }

   /*.menu li a, .menu li a:hover {
       color: #0096ff;
   }*/

   .menu .current {
      display: block; /* show only current <li> item */
   }

   .menu a {
      display: block;
      color: white;
      text-align: left;
   }

   .menu .current a {
      background: none;
      color: white;
   }

   /* on nav hover */
   .menu ul:hover {
      background:url("/Images/iconmonstr-menu-icon-128.png") no-repeat;
      padding: 50px 50px 0 0;
   }

   .menu ul:hover li {
      display: block;
      margin: 0;
      background-color:black;
   }

  .menu ul:hover .current {
     background: url(/Images/arrow.png) no-repeat 10px 7px;
   }
}

Answer 1

我不确定是否使用 CSS，但对于 jQuery，我相信您只想将点击事件附加到菜单 div 以显示子 ul。你想移动 display:none 到 css 中的 ul 而不是 li 元素这样做

 $(".menu").on("click", function(){
     $(this).children("ul").show();
 });

一个基本的例子 http://jsfiddle.net/jessikwa/60sxq4pj/