jquery - вертикальное меню навигации аккордеона

Question

У меня есть этот вертикальный аккордеон, как боковой бар навигация. Все работает нормально, но я столкнулся с проблемой с иконками, которые я использую от Twitter Bootstrap 3.

Вот FIDDLE.

Когда я расширяю элемент списка, я хочу, чтобы значок был направлен вниз, и когда я нажимаю снова, он не обрушивается. А также я хочу, чтобы значок был изменен на левую, обращаясь к значку chevron.

Также, пожалуйста, помогите мне в добавлении перехода к нему, например, когда он собирается расширяться. Я хочу, чтобы это было анимировано с лица слева направо.

А также я могу расширить меню только при нажатии на текст. Я не мог сделать этого во всей строке.

Заранее спасибо.

Answer 1

Я думаю, что мне удалось осуществить то, что вы после: Вот FIDDLE

Вот основная функция JS. Это немного неопрятно, но основная функциональность есть. Вы можете исправить это, как хотите.

function toggleAccordion(li) { 
    if(li.hasClass('active')) { 
     li.removeClass('active'); 
     $('.sub-menu', li).slideUp(); 
     $('i', li).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left'); 
    } 
    else { 
     $('li.active .sub-menu').slideUp(); 
     $('li i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left'); 
     $('li.active').removeClass('active'); 
     li.addClass('active'); 
     $('.sub-menu', li).slideDown(); 
     $('i', li).removeClass('glyphicon-chevron-left').addClass('glyphicon-chevron-down'); 
    } 
}; 

Answer 2

Проверьте это ниже код

$(window).load(function(){ 
$(document).ready(function() { 
    $('.sidebar ul li a').click(function(ev) { 
    //$('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp(); 
    $(this).next('.sub-menu').slideToggle(); 
    ev.stopPropagation();   
    if($(this).find("i").hasClass('glyphicon-chevron-left')){ 
     $(this).find("i").remove(); 
     $(this).append('<i class="sidebar-icon glyphicon glyphicon-chevron-down"></i>'); 
    }else{ 
     $(this).find("i").remove(); 
     $(this).append('<i class="sidebar-icon glyphicon glyphicon-chevron-left"></i>'); 
    } 
}); 
}); });