Question

我在导航栏中创建了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>

查看整页以查看导航菜单

截图：

Answer 1

这种风格

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

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

＆＃13;

/**
 * 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();

})();

＆＃13;

<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>

＆＃13;

Answer 2

javascript没有将类navbar-shrink添加到第二个.dropdown-menu，这绝对是原因。

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

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

到此：

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

Answer 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();

})();

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

3 个答案: