jquery toggle не будет закрываться при нажатии

Question

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

Любые мысли?

Спасибо!

//toggles 2 
$('body').on('click','.toggle h3 a', function(){ 

    if($(this).parents('.toggles').hasClass('accordion')) return false; 

    $(this).parents('.toggles').find('.toggle > div').slideUp(300); 
    $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign'); 
    $(this).parents('.toggles').find('.toggle').removeClass('open'); 

    $(this).parents('.toggle').find('> div').slideDown(300); 
    $(this).parents('.toggle').addClass('open'); 

    //switch icon 
    if($(this).parents('.toggle').hasClass('open')){ 
     $(this).find('i').attr('class','icon-minus-sign'); 
    } else { 
     $(this).find('i').attr('class','icon-plus-sign'); 
    } 

    return false; 
}); 



<div class="toggles"> 

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>First Accord</a></h3> 
    <div> 
    Content 
    </div> 
</div> 

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>Second Accord</a></h3> 
    <div> 
    Content 
    </div> 
</div> 

Answer 1

К сожалению, я не очень понимаю, что происходит с вашим кодом, так что я переписал Js часть с нуля: http://jsfiddle.net/d503n47r/2/

$('body').on('click','.toggle h3 a', function(e){ 
    e.preventDefault(); 
    if($(this).parents('.toggles').hasClass('accordion')) return false; 

    if ($(this).parents('.toggle').find('div').eq(0).hasClass('open')) { 
      $(this).parents('.toggle').find('div').eq(0).removeClass('open').slideUp(); 
    } else { 
      $('.toggle.open').removeClass('open'); 
      $(this).parents('.toggle').find('div').eq(0).addClass('open').slideDown(); 
    } 

}); 

Пожалуйста, обратите внимание на Jquery UI, как это много помогает со всеми этими общими вещами http://jqueryui.com/ (Нет необходимости изобретать велосипед)

Answer 2

Это довольно просто, почему это так. Ваша функция всегда выполняет slideUp и slideDown. В этой последовательности. Поэтому, когда ваш div рухнет, он выполнит функцию slideUp (которая на самом деле ничего не делает, потому что она уже свернута), а затем она будет slideDown. Теперь, когда div расширяется: div будет slideUp (на этот раз он идет вверх, потому что он не рухнул), а затем он пойдет вниз.

Лучший способ сделать это будет с помощью SlideToggle.

http://api.jquery.com/slidetoggle/

EDIT: Кроме того, вы можете проверить, если DIV свернут или нет с ...

if($(element).is(':visible')){ 
    //expanded 
} else { 
    //collapsed 
} 

Answer 3

MinusFour было правильно, что он стрелял и в то же время.

Способ исправить это, чтобы выполнить инструкцию if/then, которая проверяет, открыта ли она или нет, а затем открыть огонь в зависимости от этого.

Here's a link to a JSfiddle

Я также добавил класс «тумблер-панели» в контейнер, который был скользящим вверх/вниз, просто так, что после будет легче читать.

if($(this).closest('.toggle').hasClass('open')){ 
     console.log('open'); 
     $(this).parents('.toggle').find('.toggle-panel').slideUp(300); 
     $(this).closest('.toggle').removeClass('open'); 
     return 
    } 
    else { 
     console.log('close'); 
     $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign'); 
     $(this).parents('.toggle').find('.toggle-panel').slideDown(300); 
     $(this).parents('.toggle').addClass('open'); 
    }