Bootstrap / jQuery：在导航栏中滑动“活动”状态

Question

在Bootstrap 3导航栏中，您可以将元素标记为活动：

使用jQuery，我可以创建一个简单的函数，在点击时将活动状态从一个元素“切换”到另一个元素。

$('li').click(function() {
    if ( ! $(this).hasClass('active')) {
        $('li.active').removeClass('active');
        $(this).addClass('active');
        // Do more stuff here
    }
});

完整示例：http://jsfiddle.net/zEh3h/2/

现在我想要实现的是点击时从一个元素到另一个元素的深灰色背景的“幻灯片”效果。它也应该在响应式垂直模式下工作。

是否有引导本地方式来实现这一目标？或者也许是jQuery的解决方法？我在文档中找不到任何相关内容。

Answer 1

也许是这样的：

$('li').click(function() {
    if ( ! $(this).hasClass('active')) {
        $('li.active').removeClass('active');
        $(this).addClass('active');
        offsetTop = $(this).offset().top - $('.nav').offset().top;
        offsetLeft = $(this).offset().left - $('.nav').offset().left;
        $('.nav-background').animate({
            top: offsetTop,
            left: offsetLeft,
            right: $('.nav').width() - $(this).width() - offsetLeft,
            bottom: $('.nav').height() - $(this).height() - offsetTop 
        }, 'slow', 'linear');
    }
});

当视图从响应式垂直模式更改或返回时，您仍需要更新背景的位置。

jsFiddle：Example