jquery - Bootstrap/jQuery:在导航栏中滑动“事件”状态

在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解决方法？我在文档中找不到关于此的任何信息。

最佳答案

也许是这样的：

$('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