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

【问题标题】：CSS style not apply to second dropdown menuCSS 样式不适用于第二个下拉菜单
【发布时间】：2015-12-18 17:07:44
【问题描述】：

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

/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function () {

    var docElem = document.documentElement,
            header = document.querySelector('.navbar-default'),
            subheader = document.querySelector('.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');
            classie.add(subheader, 'navbar-shrink');
        } else {
            classie.remove(header, 'navbar-shrink');
            classie.remove(subheader, 'navbar-shrink');
        }
        didScroll = false;
    }

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

    init();

})();

<link href="https://dl.dropboxusercontent.com/u/50282572/bootstrap.min.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/50282572/style.css" rel="stylesheet"/>
<body id="index" class="index-page" style="height:1000px;">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" style="" id="">
      <div class="collapse navbar-collapse" style="" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-justified">
          <li class="hidden" id="">
            <a href="#page-top" class="" target="" data-value=""></a>
          </li>

          <li class="dropdown" id="listory">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<i class="fa fa-angle-down"></i>
</a>
            <ul class="dropdown-menu">
              <li class=""><a href="index.php?page=story1" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             Menu 2
              <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
              <li class="" id=""><a href="logout.php" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div style="height:500px;background:blue;"></div>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/jquery-2.1.1.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/bootstrap.min.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/classie.js"></script>
</body>

查看整页以查看导航菜单

截图：

【问题讨论】：

在你的代码 sn-p 它适用于两者
@Johannes，如果主菜单正常工作。当您指向第二个主菜单时，将显示子菜单。那么当你向下滚动页面时，子菜单的背景是透明的，应该和第一个子菜单一样，都是白色背景。
不在这里，真的！它在悬停时具有白色背景，看起来与第一个子菜单（悬停）完全相同。奇怪...（我在 Firefox 42 上，但在 Chrome 上也是一样，我刚刚检查过。）我想我不能在这里发布屏幕截图...
@Johannes，已添加屏幕截图。
我真的不能告诉你为什么，但它看起来不像这里 - 它看起来像你描述它应该的样子。嗯，神秘……

标签： javascript html css drop-down-menu

【解决方案1】：

javascript 没有在第二个.dropdown-menu 中添加类navbar-shrink 肯定是原因。

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

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

到这里：

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

【讨论】：

请注意（编辑）：我删除了最后一行 ('.dropdown-menu') 中的点！
不工作，并且在“elem.classList.add(c);”行中出现错误“Uncaught TypeError: Cannot read property 'add' of undefined”

【解决方案2】：

这种风格

.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');

与

$('.dropdown-menu').addClass('navbar-shrink');

大概

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

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

/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function () {

    var docElem = document.documentElement,
            header = document.querySelector('.navbar-default'),
            subheader = document.querySelector('.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');
            $('.dropdown-menu').addClass('navbar-shrink');
        } else {
            classie.remove(header, 'navbar-shrink');
            classie.remove(subheader, 'navbar-shrink');
        }
        didScroll = false;
    }

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

    init();

})();

<link href="https://dl.dropboxusercontent.com/u/50282572/bootstrap.min.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/50282572/style.css" rel="stylesheet"/>
<body id="index" class="index-page" style="height:1000px;">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" style="" id="">
      <div class="collapse navbar-collapse" style="" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-justified">
          <li class="hidden" id="">
            <a href="#page-top" class="" target="" data-value=""></a>
          </li>

          <li class="dropdown" id="listory">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<i class="fa fa-angle-down"></i>
</a>
            <ul class="dropdown-menu">
              <li class=""><a href="index.php?page=story1" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             Menu 2
              <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
              <li class="" id=""><a href="logout.php" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div style="height:500px;background:blue;"></div>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/jquery-2.1.1.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/bootstrap.min.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/classie.js"></script>
</body>

【讨论】：

感谢您的回复，但我想要的是将附加样式也添加到第二个子菜单中。以及为什么类“navbar-shrink”不会自动添加到第二个子菜单，因为两个代码是相同的
对不起，我是 javascript 新手。但是我对两个下拉菜单都使用了相同的类“.dropdown-menu”。只要同一个班级就不会自动申请？我该如何解决？谢谢
你可以运行我添加的代码sn -p，我想这就是你想要的
不正确，子菜单的默认颜色应该是透明的。仅在向下滚动时变为白色

【解决方案3】：

最后我自己解决了。感谢@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();

})();

【讨论】：