Javascript 单击下拉菜单

我尝试了很多JS查询，但似乎都没有成功

我只想在单击与它们相关的列表项时显示我的下拉菜单，它们需要显示，直到用户单击ul或单击链接

这是我的html：

<div class="sub-nav">
  <div class="container">
    <ul>
      <a href="#"><li class="active">All</li></a>
      <a href="#"><li>Videos</li></a>
      <a href="#"><li>Images</li></a>
      <a href="#"><li>Maps</li></a>
      <a href="#"><li>News</li></a>
      <a href="#">
        <li id="has-sub">More
          <ul>
            <a href="#"><li>Shopping</li></a>
            <a href="#"><li>Books</li></a>
            <a href="#"><li>Flights</li></a>
            <a href="#"><li>Apps</li></a>
          </ul>
        </li>
      </a>
      <a href="#">
        <li id="search-tools">Search Tools
          <ul>
            <a href="#"><li id="has-sub">Any Country</li></a>
            <a href="#"><li id="has-sub">Any Time</li></a>
            <a href="#"><li id="has-sub">All Results</li></a>
          </ul>
        </li>
      </a>
    </ul>
  </div>
</div>

试试这个：

$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});

确保您拥有jQuery库

试试这个：

$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});

---

确保您拥有jQuery库

加载jQuery库，也可以这样使用

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

li>ul{显示：无；}
.show{display:block；}

加载jQuery库，也可以这样使用

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

li>ul{显示：无；}
.show{display:block；}

在本解决方案中，当按要求单击链接时，下拉菜单将崩溃

$（'a'）。单击（函数（）{
$（'.container-ul:not（：first-child'）.hide（）；
if（$（this）.next（）是（'ul'））{
$（this.next（）.toggle（'slow'）；
}
});
ul{
显示：无；
}







在本解决方案中，当按要求单击链接时，下拉菜单将崩溃


$（'a'）。单击（函数（）{
$（'.container-ul:not（：first-child'）.hide（）；
if（$（this）.next（）是（'ul'））{
$（this.next（）.toggle（'slow'）；
}
});
ul{
显示：无；
}









所有
视频
图像
地图
新闻
更多

购物
书籍
航班
应用程序


搜索工具

任何国家
任何时候
所有结果




这应该有效


所有
视频
图像
地图
新闻
更多

购物
书籍
航班
应用程序


搜索工具

任何国家
任何时候
所有结果




这应该行得通
您的html是错误的。Element
a
不允许作为Element
ul
的子元素。锚定标签应该在LI中。看看这个：“我已经尝试了很多JS查询，但似乎都不起作用”-你的插件实现正确吗？jQuery是否正确加载？Cor
    <div class="sub-nav">
            <div class="container">

                <ul>
                     <li class="active">All</li>  
                     <li>Videos</li>  
                     <li>Images</li>  
                     <li>Maps</li>  
                     <li>News</li>  
                     <li id="has-sub">More
                        <ul>
                            <li>Shopping</li>  
                            <li>Books</li>  
                            <li>Flights</li>  
                            <li>Apps</li>  
                        </ul>
                    </li>  
                     <li id="search-tools">Search Tools
                        <ul>
                             <li id="has-sub">Any Country</li>  
                             <li id="has-sub">Any Time</li>  
                             <li id="has-sub">All Results</li>  
                        </ul>
                    </li>  
                </ul>

            </div>
        </div>