Wie fix Bug Untermenü ein-/ausblenden?

Question

Ich versuche, ein Navigationsmenü zu machen: https://jsfiddle.net/f73wa3w1/1/

Ich habe einen Fehler. Wenn wir auf li.submenu_f dann li.submenu_s und wieder auf li.submenu klicken, finden wir Fehler. Screenshot: http://dl2.joxi.net/drive/2016/06/07/0017/1846/1148726/26/0c4.jpg

Ich weiß nicht, wie das zu beheben ist. Kann mir jemand helfen?

$('.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

Das Problem ist, dass JQuery UI spezifische Stile für die Höhe des Elements erfordert umgeschaltet werden. Sie können eine Arbeit finden, indem Sie die Höhe der Elemente auto an bestimmten Punkten in der Animation festlegen. Entfernen Sie beim Öffnen der Listen die automatische Höhe. Wenn jedoch die Listen zu schließen, die automatischen Höhen hinzufügen:

$('.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'); 
    }); 
}) 

Für die Hin- und Herschalten Anweisung, fügte ich einen Rückruf hinzufügen/entfernen, um eine Klasse, die die Höhe Eigenschaft ändert. Hier ist der zusätzliche CSS:

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

die Geige Siehe: https://jsfiddle.net/f73wa3w1/5/

Hinweis: Ich habe die anderen Schlitten Toggle-Anweisungen entfernt. Dies wird sogar mit ihnen dort funktionieren, aber Sie werden ein wenig abgehackt feststellen, wenn Sie versuchen, das Problem neu zu erstellen.

eine elegantere Lösung

Das Problem ist AKTUALISIERT, dass Sie das am weitesten unten Untermenü richtig schließen. Es gibt keine Rückrufe in diesem Code und es ist eine kleine zwicken von Ihrer ursprünglichen:

$('.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

Es ist auf meinem PC zu arbeiten? Vielleicht, was es ist ein Browser