After click on menu button menu open on left side but when click on More all ul has opened. I want only related UL will open. Please Help i am fresher in Jquery.....

After click on menu button menu open on left side but when click on More all ul has opened. I want only related UL will open. Please Help i am fresher in Jquery.....


  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  4. <script>
  5. $(document).ready(function(e) {
  6.    $("button.menu-open").click(function(){
  7. $("body").addClass("stickmenu");
  8. });
  9. $("button.menu-close").click(function(){
  10. $("body").removeClass("stickmenu");
  11. });
  13. var kvd = "ul>li:has(ul)";
  14. $(kvd).addClass("parent-item").prepend("<div class='buttonlink'>More</div>");
  15. $(".buttonlink").click(function(){
  16. $("ul>li").closest('ul').find('ul').toggle('slow');
  17. });
  18. });
  19. </script>
  20. <style>
  21. body{transition:padding ease 1s; -webkit-transition:padding ease 0.5s;}
  22. .stickmenu{padding-left:250px}
  23. .fixedmenu{width:250px; top:0; left:0; opacity:0; display:none; position:absolute; top:0; bottom:0; background-color:#333; color:#FFF}
  24. .stickmenu .fixedmenu{opacity:1; display:block}

  26. ul>li.parent-item > ul{display:none}
  27. </style>
  28. <button class="menu-open">Menu</button>
  29. <div class="fixedmenu">
  30. <button class="menu-close">Menu Close</button>
  31. <ul>
  32. <li><a href="#">tab 1</a></li>
  33. <li><a href="#">tab 2</a>
  34. <ul>
  35. <li><a href="#">tab 2.1</a></li>
  36. <li><a href="#">tab 2.2</a></li>
  37. <li><a href="#">tab 2.3</a></li>
  38. </ul>
  39. </li>
  40. <li><a href="#">tab 3</a>
  41. <ul>
  42. <li><a href="#">tab 3.1</a></li>
  43. <li><a href="#">tab 3.2</a></li>
  44. <li><a href="#">tab 3.3</a></li>
  45. </ul>
  46. </li>
  47. </ul>
  48. </div>
  49. <div id="div1">
  50. <p> theis is dsfds dsfdsl ldjfds didfdf idfdo dfdf dfoifj  dfdof erer rerlr</p>
  51. <p> theis is dsfds dsfdsl ldjfds didfdf idfdo dfdf dfoifj  dfdof erer rerlr</p>

  53. </div>