Javascript 如何在单击某项时隐藏菜单，或在有人单击时隐藏菜单

因此，我想在单击某个项目时隐藏事件的引导菜单。这是我的菜单代码

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

$（“span.menu”）。单击（函数（）{
$（“.top nav ul”）.滑动切换（500，函数（）{
$（“#ul li a”）。单击（函数（）{
$（“.ul”）.hide（）；
});
});
$('')
});

基本上，我需要在单击

项时隐藏整个“

”元素， 当前，当有人单击home或about时，菜单将保留在屏幕上，并且不会消失

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

引用所有元素，其类为“ul”，您可能希望（在代码示例中）id为referece

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

或者，如果您需要所有

元素，然后将它们都赋予相同的类（如“hideableUL”），则可以如下所示：

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

---

使用以下Jquery代码：

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

$（“.top nav li”）。单击（函数（）{
$（“.top nav ul”）.滑动切换（500，函数（）{
$（this.hide（）；
});
});

我做了这件事，它很有帮助

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

---

你有个错误。。您的

ul

有一个ID而不是类，因此您应该在jquery中使用

“#”

要隐藏ul，您可以使用

hide（）

或

fadeOut（0）

或

---

这似乎已经工作，但菜单似乎仍然是有缺陷的，有时它停留在屏幕上或与它一起移动，我不知道js是否有缺陷或写得不好，有什么想法吗？这一切都与引导有关。我只知道jquery。抱歉。请在隐藏前尝试折叠菜单。我尝试更改了一些内容，效果良好，问题似乎已解决。

$（.span.menu”）。单击（function（）{$（.top nav ul”）.slideToggle（500）；$（''）$（“#ul li a”）。单击（函数（）{$（“#ul”）.hide（）；}）
$("#ul li a").click(function() {
     $("#ul").fadeOut(0); 
});

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