如何修復bug顯示/隱藏子菜單？

Question

我正在嘗試制作導航菜單： https ： //jsfiddle.net/f73wa3w1/1/

我有一個bug。 如果我們點擊li.submenu_f然后li.submenu_s再次點擊li.submenu我們發現bug。 截圖： http ： //dl2.joxi.net/drive/2016/06/07/0017/1846/1148726/26/0c40123255.jpg

我不知道如何解決這個問題。 誰能幫我？

 $('.cc_name').click(function() { $('.categories').stop().slideToggle(300); }) $('.submenu_f > a').click(function() { $('.submenu_f ul').slideUp(300); $(this).parent().children('ul').stop().slideToggle(300); }) $('.submenu_s > a').click(function() { $('.submenu_s ul').slideUp(300); $(this).parent().children('ul').stop().slideToggle(300); }) 

 .categories, #categories ul li ul, #categories ul li ul li ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="categories"> <div class="cc_name">Каталог товаров</div> <div class="categories"> <ul> <li class="cat_icon"><a href="#" title="">Электроника</a></li> <li class="cat_icon"><a href="#" title="">Бытовая техника</a></li> <li class="cat_icon"><a href="#" title="">Компьютеры</a></li> <li class="cat_icon"><a href="#" title="">Товары для дома</a></li> <li class="cat_icon"><a href="#" title="">Товары для авто</a></li> <li class="cat_icon"><a href="#" title="">Сад и огород</a></li> <li class="cat_icon"><a href="#" title="">Строительство и ремонт</a></li> <li class="cat_icon submenu_f"> <a href="#" title="">Подарки и украшения</a> <ul> <li class=""><a href="#" title="">Теле-видео-аудио техника</a></li> <li class=""><a href="#" title="">Телефоны и связь</a></li> <li class="submenu_s"> <a href="#" title="">Фото и видео</a> <ul> <li class=""><a href="#" title="">Плиты</a></li> <li class=""><a href="#" title="">Вытяжки</a></li> <li class=""><a href="#" title="">Холодильники</a></li> <li class=""><a href="#" title="">Духовые шкафы</a></li> <li class=""><a href="#" title="">Варочные поверхности</a></li> <li class=""><a href="#" title="">Посудомоечные машины</a></li> <li class=""><a href="#" title="">Стиральные машины</a></li> <li class=""><a href="#" title="">Аксессуары</a></li> </ul> </li> <li class=""><a href="#" title="">Портативная электроника</a></li> <li class=""><a href="#" title="">Прочая электроника</a></li> <li class=""><a href="#" title="">Элементы питания</a></li> </ul> </li> <li class="cat_icon"><a href="#" title="">Парфюмерия и косметика</a></li> <li class="cat_icon"><a href="#" title="">Товары для детей</a></li> <li class="cat_icon"><a href="#" title="">Товары для спорта и отдыха</a></li> <li class="cat_icon"><a href="#" title="">Товары для животных</a></li> <li class="cat_icon"><a href="#" title="">Одежда и обувь</a></li> <li class="cat_icon"><a href="#" title="">Бытовая химия</a></li> <li class="cat_icon submenu_f"><a href="#" title="">Фермерские товары</a> <ul> <li class="submenu_s"> <a href="">1</a> <ul> <li class=""><a href="">1</a></li> </ul> </li> <li class="submenu_s"> <a href="">2</a> <ul> <li class=""><a href="">2</a></li> </ul> </li> </ul> </li> </ul> </div> </div> 

Answer 1

問題是JQuery UI需要特定樣式來切換元素的高度。 您可以通過在動畫中的特定點auto調整元素的高度來找到解決方法。 打開列表時，請刪除自動高度。 但是，關閉列表時，添加自動高度：

$('.cc_name').click(function(){
        $('.categories').stop().slideToggle(300);
})

$('.submenu_f > a').click(function(){
  $('.submenu_f ul').removeClass('modify-height');
    $(this).parent().children('ul').stop().slideToggle(300,function(){
    $(this).addClass('modify-height');
  });
})

$('.submenu_s > a').click(function(){
  $('.submenu_s ul').removeClass('modify-height');
    $(this).parent().children('ul').stop().slideToggle(300,function(){
    $(this).addClass('modify-height');
  });
})

對於切換語句，我添加了一個回調來添加/刪除一個修改height屬性的類。 這是添加的CSS：

.modify-height{
  height: auto !important;
}

看小提琴： https ： //jsfiddle.net/f73wa3w1/5/

注意：我已刪除其他幻燈片切換語句。 這可以在那里使用它們，但是在嘗試重新創建問題時你會注意到一點點不穩定。

更新了更優雅的解決方案

問題是您沒有正確關閉最底層的子菜單。 此代碼中沒有回調，它只是原始的一個小調整：

$('.cc_name').click(function(){
        $('.categories').stop().slideToggle(300);
})

$('.submenu_f > a').click(function(){
  $('.submenu_s ul').slideUp(300); //slide up the child 'ul' here
  $(this).delay(300).parent().children('ul').stop().slideToggle(300); //add a delay equal to the child 'ul' animation to compensate for any lag
})

$('.submenu_s > a').click(function(){
    $(this).parent().children('ul').stop().slideToggle(300);
})

https://jsfiddle.net/f73wa3w1/6/

Answer 2

它在我的電腦上工作？ 也許這是一個瀏覽器的事情