文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS样式不适用于第二个下拉菜单

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

Stack Overflow用户

提问于 2015-12-17 15:26:26

回答 3查看 302关注 0票数 1

我在导航栏中创建了两个相同的下拉菜单。当指向主菜单时，子菜单将自动显示。向下滚动时，子菜单的背景将自动更改为白色。但它只影响第一个子菜单，第二个主菜单的子菜单不影响。我是在调用同一个类，但是为什么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>

完整页面中的视图，以查看导航菜单

截图：

javascript

html

css

drop-down-menu

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-12-18 09:07:44

最后我自己解决了。谢谢约翰斯和阿米斯林的提示。以前的代码无法处理具有相同类名的多个元素。我只是按下面添加的循环更改了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();

})();

票数 0

Stack Overflow用户

发布于 2015-12-17 15:41:45

这种风格

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

票数 1

Stack Overflow用户

发布于 2015-12-17 17:08:04

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

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

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

对此：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34338220

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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