Ниже представлен код многоуровневого меню (3 уровня). Код работает, но есть две проблемы:

1. у второго уровня нет плавного раскрытия и скрытия.

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

Вопрос: как исправить коды javascript, чтобы решить эти две задачи.

Спасибо

<script type="text/javascript"> 
  $(function() {
   var jQuery.browser.mobile = isTouchDevice = true;
   
   $(window).on('resize', function() {
        isMobileWidth=$(document).width()<768?true:false;
   });

   $(".menu__top-level li").hover(function(){
       // Add code for mouse enter
       var g = $(this);
       if (!isMobileWidth) {
         if(timeoutHandle){
            clearTimeout(timeoutHandle);
            timeoutHandle = null;
         }
         timeoutHandle = setTimeout(function() {
            g.addClass("hover")
         }, 250)
       }
    },
    function(){
       // Add code for mouse leave
       if (!isMobileWidth) {
            $(this).removeClass("hover");
            clearTimeout(timeoutHandle)
       }
    });

   $(".menu__top-level > li").each(function() {
       if (!$(this).children(".menu__second-level").length) {
           $(this).children("a").addClass("no-submenu");
           $(this).addClass("no-submenu")
       }
   });
 
   $(document).on("click", ".menu__top-level > li", function(e) {
       if (isMobileWidth || jQuery.browser.mobile || isTouchDevice) {
           var g = $(this);           
           if (g.hasClass("hover")) {
               window.location = $(this).children("a").attr("href")
           } else {
               $('.menu__top-level > li > a:not(".no-submenu")').parent().removeClass("hover"); 
               g.addClass("hover");                           
               $children = g.find("> ul > li:not(.no-line)");
               $(".menu__second-level li").removeClass("expanded");
               if ($children.length == 1) {                   
                   $children.first().addClass("expanded")                                                       
               }                           
           }
           if (g.find("ul").length > 0) {
               return false
           }
       }
   });

   $(document).on("touchstart click", ".menu__top-level > li > ul > li > h3", function(event) {
       if (event.type == "touchstart")
           $(this).off('click').on('click', function(e){ e.preventDefault(); });
       
       if (isMobileWidth || jQuery.browser.mobile || isTouchDevice) {
           var g = $(this).parent();           
           if (g.hasClass("expanded")) {
               g.removeClass("expanded",1000)
           } else {
               g.siblings().removeClass("expanded",1000);
               g.addClass("expanded",1000); 
           }
           return false
       }
   });
  });
</script>

<ul class="menu__top-level">
                  <li>
                    <a class="" href="">Level-1</a>
                    <ul class="menu__second-level">
                      <li>
                        <h3>Level-2</h3>
                        <ul>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                        </ul>
                      </li>
                      <li>
                        <h3>Level-2</h3>
                        <ul>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                        </ul>
                      </li>
                      <li class="no-line"><a href=""><img data-src="" class="" alt="" src="">Here image</a></li>
                    </ul>
                  </li>
                  <li><a class="" href="">Level-1</a>
                    <ul class="menu__second-level">
                      <li>
                        <h3>Level-2</h3>
                        <ul>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                        </ul>
                      </li>
                      <li>
                        <h3>Level-2</h3>
                        <ul>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                        </ul>
                      </li>
                      <li>
                        <h3>Level-2</h3>
                        <ul>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                          <li><a href="">Level-3</a></li>
                        </ul>
                      </li>
                      <li class="no-line"><a href=""><img data-src="" class="" alt="" src="">Here image</a></li>
                    </ul>
                  </li>
                </ul>