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

好的，所以它需要一些迭代和一些来自 Tony 和 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/