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

Question

我想製作導航菜單：https://jsfiddle.net/f73wa3w1/1/

我有一個錯誤。如果我們點擊li.submenu_f然後li.submenu_s，再點擊li.submenu我們發現錯誤。屏幕截圖：http://dl2.joxi.net/drive/2016/06/07/0017/1846/1148726/26/0c4.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用戶界面需要的元素的高度，具體樣式被切換。您可以通過在動畫中的特定點處設置元素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

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