如何在悬停桌面上进行下拉菜单，然后在移动设备中滑动，但请单击

Question

有人可以帮我吗？

我已经在某些方面尝试过，但我仍然无法理解我想要。

Answer 1

在这里一个简单的示例：

html：

<ul>
  <li class="li-first">Tab 1
    <ul class="nav-2">
      <li>Element 1 Tab 1</li>
      <li>Element 2 Tab 1</li>
    </ul>
  </li>
  <li class="li-first">Tab 2
    <ul class="nav-2">
      <li>Element 1 Tab 2</li>
      <li>Element 2 Tab 2</li>
    </ul>
  </li>
</ul>

CSS：

.nav-2{
     display:none;
     list-style:none;
}
li{
    background-color: #ccc;
}
.li-first{
    float:left;
    list-style:none;
    padding: 0 20px;
}
.li-first ul{
    padding:0;
}
@media screen and (min-width: 768px){
    .li-first:hover .nav-2{
        display:block;
    }
}
@media screen and (max-width: 767px){
    .li-first{
        cursor: pointer;
    }
    .dropactiv .nav-2{
        display: block;
    }
}

jQuery：

$(".li-first").click(function(){
            if (!$(this).hasClass("dropactiv")){
                $(".li-first").removeClass("dropactiv");
                $(this).addClass("dropactiv");
                return false;
            }
            else{
                $(".li-first").removeClass("dropactiv");
            }
    });