jquery - 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：示例