Bootstrap affix scrollspy上的活动类对隐藏的div不起作用

Question

我在侧边栏上使用了bootstrap词缀。它在正常情况下工作正常。 Here is the fiddle正常行为，工作正常。如果您查看这个小提琴，您会看到.list-group-item点击我的意思是实现了蓝色背景，.active等级是.list-group-item。

但是，在我的场景中，侧边栏出现在2-3个屏幕之后。一切都发生在同一页面，所以，我必须隐藏该屏幕。为简单起见，我将词缀内容和相关内容仅放在一个隐藏的步骤at this fiddle下，并注意到这个场景中没有实现词缀.active！当那些词缀内容来自隐藏的div时，如何使其正常工作？

Answer 1

在bootstrap documentation found here:

中

  

非：可见目标元素被忽略目标元素不是   ：根据jQuery可见会被忽略而且它们对应   导航项目永远不会突出显示。

因此，当容器设置为display:none;时，基本上不会突出显示scrollspy元素但是您可以使用visibility: hidden;但如果内容足够长，您仍会在页面上看到滚动条。我用你的js.fiddle制作了一个working version here。正如您所看到的，我删除了JQuery并使用纯CSS来显示/隐藏以及将display元素更改为visibility。希望有所帮助。

修改*

好的，在弄乱了JQuery并阅读了我发现的文档后，你可以在更改DOM之后刷新scrollspy，使用这个JQuery，你的应用程序将按预期工作。

$('body').on('click', '.show', function() { 
    $(this).parents().next('.box-creator-section').slideToggle();
    if ($(this).text() == "Show") { 
       $(this).text("Hide"); 
    } 
    else { 
       $(this).text("Show"); 
       /*
        $('.sidebar').each(function () {
          var $spy = $(this).scrollspy('refresh')
       });
       */
    };
    $('body').scrollspy('refresh');
});

我在显示/隐藏调用后基本上添加了$('body').scrollspy('refresh');。 Second updated js.fiddle here