Как скрыть меню, когда элемент щелкнул или скрыть меню, когда кто-то нажал кнопку

Question

Так что я хочу скрыть свое меню начальной загрузки при событии, когда нажимается элемент. Это мой код меню

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

В принципе, мне нужно, чтобы скрыть всю " <ul> " элемент, когда <li> элемент щелкнул, В настоящее время, когда кто-то нажмите на дому или около, меню остается на экране и не исчезает.

Answer 1

Используйте следующий Jquery код:

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

Answer 2

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

ссылки все элементы с классом «ул» Вы, вероятно, хотите (в вашем примере кода) идентификатор Referece

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

Или, если вы хотите, чтобы все <ul> элементы затем дать им обоим то же самое класс (например, "hideableUL"), то вы могли бы пойти, как:

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

Answer 3

Я сделал это, и это помогло.

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

Answer 4

у вас есть ошибка .. ваш ul имеет идентификатор не класс, так что вы должны нам '#' в вашем JQuery.

И скрыть ул Вы можете использовать либо hide() или fadeOut(0) ..

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

или

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