Hide And Show List Menu Items Using Jquery

I have simple vertical menu using list elements like below

• Home

• Solution 1:

  You constantly reload page - and the javascript reloads too. If you want to save the state of the menu between requests use cookies.

  Or here is a version without reloading the page - then you have to use Ajax.

  <scripttype="text/javascript">
  $(document).ready(function() {
  
      $('#left-navigation a').click(function(){
       returnfalse;
      });
  
      $(".parent-grapes > a, .parent-apples > a, .parent-dry-fruits > a").click(function () {
      var $block = $(this).parent().find(".sub-menu");
      $block.toggle();
  
      $.get($(this).attr('href'), function(data){
        $('#main-content').html($(data).find('#main-content').html());
      });
      returnfalse;
      });
  });
  </script>

  The menu requires only this javascript (and JQuery)

  Solution 2:

  <scripttype="text/javascript">
        $(document).ready(function() {
           $("#apples > a").on('click',function(e){
              $('#apples .subMenu ').toggle();
              returnfalse;
           });
        }); 
     </script>

  http://jsfiddle.net/makedone/WRcBa/

  Solution 3:

  try this. It worked for me..

  Thanks! @leo.

  <scripttype="text/javascript">
        $(document).ready(function() {
              hideAll();
  
               $("#leftNav li a").click( function(e) {
                 try {
  
                    var pid = $(this).parent('li').attr("id");
                    //alert(pid);if(pid == undefined) {
  
                    } else {
                      hideAll();
                      $("#" + pid + " .submenu").show();
                      e.preventDefault();
                    }
  
                 } catch(e) {
                  alert("oops!");
                 }
              });
          }); 
  
  
          functionhideAll() { 
               $(".subMenu").hide();
          }
  
    </script>

Share