Question

我尝试了很多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>

Answer 1

试试这个：

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

确保您拥有jQuery库。

Answer 2

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

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

将样式应用于菜单html，如下所示

<style>
    li > ul{display:none;}
    .show {display:block;}
</style>

现在这就是你要找的东西。

<script>
    jQuery("li:has(ul)").click(function(){
        jQuery("ul",this).toggleClass('show');
    });
</script>

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

li > ul{display:none;}
.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

使用jQuery而不是$，因为某些框架或cms工具与它有冲突。所以jQuery始终有效。

Answer 3

在此解决方案中，当您询问链接时，下拉菜单会折叠。

＆＃13;

$('a').click(function(){
    $('.container ul:not(:first-child)').hide();
  if($(this).next().is('ul')){
    $(this).next().toggle('slow');
  }
});

＆＃13;

ul ul{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 4

    <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>

这应该有效

单击下拉菜单

4 个答案: