jquery/bootstrap/font真棒手風琴菜單 - 如何自動打開活動鏈接

Question

我已經設法讓這個小提琴到我仍然可以使用主標題錨點作爲鏈接，仍然使用圖標作爲手風琴觸發器，同時使用Twitter Bootstrap和Font Awesome圖標。

唯一的問題是，當我點擊一個鏈接（在Moodle中）時，刷新的頁面不記得菜單選項應該保持打開狀態。

我已將子菜單項3.2設置爲活動狀態，但沒有需要注意的代碼3至3.7的代碼應該展開。

任何幫助讚賞，如果這小提琴可以幫助你，那麼太棒了！

http://jsfiddle.net/brianlmerritt/x3P6u/

$(document).ready(function() { 
function toggleAccordion(li) { 
    if (li.hasClass('active')) { 
     li.removeClass('active'); 
     $('.sub-menu', li).slideUp(); 
     $(li).removeClass('fa-caret-down').addClass('fa-caret-right'); 
    } else { 
     $('li.active .sub-menu').slideUp(); 
     $('li i').removeClass('fa-caret-down').addClass('fa-caret-right'); 
     $('li i').removeClass('active'); 
     li.addClass('active'); 
     $('.sub-menu', li).slideDown(); 
     $(li).removeClass('fa-caret-right').addClass('fa-caret-down'); 
    } 
}; 
$('.book_sidebar ul li').click(function (ev) { 
    ev.stopPropagation(); 
    toggleAccordion($(this)); 
}); 
$('.book_sidebar ul li a').click(function (ev) { 
    ev.stopPropagation(); 
    toggleAccordion($(this).parent()); 
}); 

OK，所以花了幾個迭代和託尼和Codecademy網站一些很大的幫助，但最終的代碼是：

$(document).ready(function() { 

function toggleAccordion(li) { 
    if (li.hasClass('active')) { 
     li.removeClass('active'); 
     $('.sub-menu', li).slideUp(); 
     $(li).removeClass('fa-caret-down').addClass('fa-caret-right'); 
    } else { 
     $('li.active .sub-menu').slideUp(); 
     $('li.active.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-right'); 
     $('li.active').removeClass('active'); 
     li.addClass('active'); 
     $('.sub-menu', li).slideDown(); 
     $('.sub-menu', li).children().removeClass('active'); 
     $(li).removeClass('fa-caret-right').addClass('fa-caret-down'); 
    } 
}; 
$('.book_sidebar ul li').click(function (ev) { 
    ev.stopPropagation(); 
    toggleAccordion($(this)); 
}); 
$('.book_sidebar ul li a').click(function (ev) { 
    ev.stopPropagation(); 
    toggleAccordion($(this).parent()); 
}); 

function checkActive(li) { 
    if (li.hasClass('active')) { 
     if (li.parent().hasClass('sub-menu')) { 
      toggleAccordion($('.active').parent(".sub-menu").parent()); 
     } else { 
      toggleAccordion($('.active')); 
     } 
    } else { 
     /* do nothing */; 
    } 
}; 
/*$('.book_sidebar ul li a').click(function(ev) { 
    $('.book_sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp(); 
    $(this).next('.sub-menu').slideToggle(); 
    ev.stopPropagation(); 
    $(this).next('i').remove(); 
    $(this).append('<i class="sidebar-icon fa fa-caret-down"></i>'); 
});*/ 
checkActive($('.active')); 
/* toggleAccordion($('.active').parent(".sub-menu").parent());*/ 

}）;

你可以看到它在http://jsfiddle.net/brianlmerritt/L8vS3/

Answer 1

您需要toggleAccordion的文件準備工作，但你的toggleAccordion是設置使用父列表項而不是您已使用活動類設置的子菜單。

toggleAccordion($('.active').parent(".sub-menu").parent()); 

這種解決方案的問題是你的3.2項仍然會有活動類，你會被添加活性類到3

http://jsfiddle.net/x3P6u/20/