Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2016, 06:51
Новичок на форуме
Отправить личное сообщение для SkAndriy Посмотреть профиль Найти все сообщения от SkAndriy
 
Регистрация: 14.10.2016
Сообщений: 3

Нет плавного открытия и закрытия 2-го уровня меню
Ниже представлен код многоуровневого меню (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>
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2016, 08:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

SkAndriy,
может чем поможет ...
Выпадающее меню на jquery
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2016, 10:04
Новичок на форуме
Отправить личное сообщение для SkAndriy Посмотреть профиль Найти все сообщения от SkAndriy
 
Регистрация: 14.10.2016
Сообщений: 3

спасибо за помощь, но в теме по ссылке окончательного ответа нет. может есть еще мнения как исправить рабочий код в этом случае. спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Открыть слайд (раздел) текущего пункта меню Demath Элементы интерфейса 8 18.07.2012 02:49
Ошибка в JS (меню - дерево). Firefox отвергает, остальные нет. ким чен ын Общие вопросы Javascript 2 23.04.2012 17:41
скрипт работает только на последнем пункте меню walking Элементы интерфейса 0 08.01.2012 14:56
JS меню работает на обычной html странице, а на юкозовском движке нет. adware Я не знаю javascript 10 16.05.2009 16:48