如何在单击项目时隐藏菜单，或在有人单击离开时隐藏菜单

How to hide a menu when an item is clicked or hide the menu when someone clicks away

本文关键字：隐藏菜单 单击 离开 项目      更新时间：2023-09-26

所以我想在单击项目时隐藏事件上的引导菜单。这是我的菜单代码

<div class="container visible-xs" id="top">
     <div class="header-bottom navbar-fixed-top">
          <div class="top-nav">
          <span class="menu"><img src="images/pic copy.png" alt="toggle"> <a href="#">  BESSIT4REAL</a></span>
              <ul id="ul">
                  <li><a href="index.html#top">Home</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#music">Music</a></li>
                  <li><a href="#contact">Contact</a></li>
              </ul>
          </div>
         <div class="social-icons">
             <ul class="social">
                 <li><a  href="#" ><i> </i> </a></li>
                 <li><a  href="#" ><i class="rss"></i></a></li>
                 <li><a  href="https://twitter.com/bessit_deejay" ><i class="twitter"></i></a></li>
             </ul>
         </div>
         <div class="clearfix"></div>
     </div>
     <br class="visible-xs">
</div>

这是我的JavaScript代码

<script>
    $("span.menu").click(function(){
        $(".top-nav ul").slideToggle(500, function(){
            $("#ul li a").click(function() {
               $(".ul").hide(); 
            });
        });
        $('')
    });
</script>

基本上我需要在单击<li>项时隐藏整个" <ul>"元素，目前，当有人单击主页或关于时，菜单会保留在屏幕上并且不会消失。

使用以下 Jquery 代码：

<script>
$(".top-nav li").click(function(){
    $(".top-nav ul").slideToggle(500, function(){
           $(this).hide();
    });
});
</script>

你有一个错误......你的ul有一个ID而不是一个类，所以你应该在你的jquery中'#'。

要隐藏您的ul，您可以使用hide()或fadeOut(0)..

$("#ul li a").click(function() {
     $("#ul").fadeOut(0); 
});

或

$("#ul li a").click(function() {
     $(this).fadeOut(0); 
});

 $(".ul").hide();

引用带有"ul"类的所有元素 您可能希望（在您的代码示例中）id referece

$("#ul").hide();

或者，如果你想要所有的<ul>元素，那么给它们相同的类（如"hideableUL"），那么你可以像：

$(".hideableUL").hide();

我这样做了，它有所帮助。

$("span.menu").click(function(){
                            $(".top-nav #ul").slideToggle(500, function(){
                                $("#ul li a").click(function() {
                                   $(".top-nav #ul").hide(); 
                                });
                            });
                            $('')
                        });
相关文章：