Javascript CSS样式不适用于第二个下拉菜单

我在导航栏中创建了两个相同的下拉菜单。当指向主菜单时，子菜单将自动显示。当向下滚动时，子菜单的背景将自动更改为白色。但它只影响第一个子菜单，第二主菜单的子菜单不起作用。我调用的是同一个类，但为什么css不应用于第二个子菜单？下面是我的示例代码

/**
*cbpAnimatedHeader.js v1.0.0
* http://www.codrops.com
*
*根据麻省理工学院许可证授权。
* http://www.opensource.org/licenses/mit-license.php
* 
*版权所有2013，Codrops
* http://www.codrops.com
*/
var cbpAnimatedHeader=（函数（）{
var docElem=document.documentElement，
header=document.querySelector（'.navbar default'），
subheader=document.querySelector（“.下拉菜单”），
didcoll=false，
改头换面=150；
函数init（）{
window.addEventListener（'scroll'，函数（事件）{
如果（！didcoll）{
didcoll=true；
设置超时（滚动页面，250）；
}
}，假）；
}
函数scrollPage（）{
var sy=scrollY（）；
如果（sy>=更换头翼）{
添加（标题“导航栏收缩”）；
增加（副标题“导航栏收缩”）；
}否则{
类别移除（标题“导航栏收缩”）；
类别移除（副标题“导航栏收缩”）；
}
didcoll=false；
}
函数scrollY（）{
return window.pageYOffset | | docElem.scrollTop；
}
init（）；
})();















此样式

.navbar-default .nav-justified li {
background-color: rgba(255,255,255,0.5);
}

正确应用于两个子菜单，仅第一个子菜单具有附加样式：

@media (min-width: 768px)
.dropdown-menu.navbar-shrink {
background-color: #fff;
margin: 0;
}

如果从该样式中删除白色背景，您将注意到2子菜单将获得相同的样式。

第一个子菜单
ul
有一个额外的类
navbar-shrink

编辑：

所以你想把
navbar-shrink
类添加到2个子菜单中，问题出在js代码上，你可以替换它

classie.add(header, 'navbar-shrink');

与

大概

header = document.querySelector('.navbar-default');
classie.add(header, 'navbar-shrink');

仅选择类的第一次出现，而不是所有类出现


/**
*cbpAnimatedHeader.js v1.0.0
* http://www.codrops.com
*
*根据麻省理工学院许可证授权。
* http://www.opensource.org/licenses/mit-license.php
* 
*版权所有2013，Codrops
* http://www.codrops.com
*/
var cbpAnimatedHeader=（函数（）{
var docElem=document.documentElement，
header=document.querySelector（'.navbar default'），
subheader=document.querySelector（“.下拉菜单”），
didcoll=false，
改头换面=150；
函数init（）{
window.addEventListener（'scroll'，函数（事件）{
如果（！didcoll）{
didcoll=true；
设置超时（滚动页面，250）；
}
}，假）；
}
函数scrollPage（）{
var sy=scrollY（）；
如果（sy>=更换头翼）{
添加（标题“导航栏收缩”）；
$（'.dropdown menu'）.addClass（'navbar-shrink'）；
}否则{
类别移除（标题“导航栏收缩”）；
类别移除（副标题“导航栏收缩”）；
}
didcoll=false；
}
函数scrollY（）{
return window.pageYOffset | | docElem.scrollTop；
}
init（）；
})();















javascript没有将class
navbar shrink
添加到第二个
中。下拉菜单
肯定是原因

如果您可以访问并更改问题中引用的脚本，请尝试更改此行

subheader = document.querySelector('.dropdown-menu'),

为此：

subheader = document.getElementsByClassName('dropdown-menu'),

最后我自己解决了。感谢@Johannes和@Aminesrine提供的提示。以前的代码无法处理具有相同类名的多个元素。我只是通过添加循环来检查js，如下所示，它成功了

var cbpAnimatedHeader = (function () {

var docElem = document.documentElement,
        header = document.querySelector('.navbar-default'),
        subheader = document.querySelectorAll('.dropdown-menu'),
        didScroll = false,
        changeHeaderOn = 150;

function init() {
    window.addEventListener('scroll', function (event) {
        if (!didScroll) {
            didScroll = true;
            setTimeout(scrollPage, 250);
        }
    }, false);
}

function scrollPage() {
    var sy = scrollY();
    if (sy >= changeHeaderOn) {
        classie.add(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.add(subheader[i], 'navbar-shrink');
        }
    } else {
        classie.remove(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.remove(subheader[i], 'navbar-shrink');
        }
    }
    didScroll = false;
}

function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
}

init();

})();

var cbpAnimatedHeader=（函数（）{
var docElem=document.documentElement，
header=document.querySelector（'.navbar default'），
subheader=document.queryselectoral（“.dropdown menu”），
didcoll=false，
改头换面=150；
函数init（）{
window.addEventListener（'scroll'，函数（事件）{
如果（！didcoll）{
didcoll=true；
设置超时（滚动页面，250）；
}
}，假）；
}
函数scrollPage（）{
var sy=scrollY（）；
如果（sy>=更换头翼）{
添加（标题“导航栏收缩”）；
var i；
对于（i=0；i
在您的代码段中，它适用于both@Johannes，如果是主菜单
var cbpAnimatedHeader = (function () {

var docElem = document.documentElement,
        header = document.querySelector('.navbar-default'),
        subheader = document.querySelectorAll('.dropdown-menu'),
        didScroll = false,
        changeHeaderOn = 150;

function init() {
    window.addEventListener('scroll', function (event) {
        if (!didScroll) {
            didScroll = true;
            setTimeout(scrollPage, 250);
        }
    }, false);
}

function scrollPage() {
    var sy = scrollY();
    if (sy >= changeHeaderOn) {
        classie.add(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.add(subheader[i], 'navbar-shrink');
        }
    } else {
        classie.remove(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.remove(subheader[i], 'navbar-shrink');
        }
    }
    didScroll = false;
}

function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
}

init();

})();