如何使用 javascript 中的 classList.contains 在引导下拉菜单中获取 li 类

how can I get the li classes inside the bootstrap dropdown menu using the classList.contains from javascript

本文关键字：下拉菜单 获取 li javascript 何使用 中的 classList contains      更新时间：2023-09-26

这就是我想要实现的：当我打开dropdow菜单时，将显示一个特定的div（div id="spacer1"）并且当我关闭下拉菜单时，spacer1应该被隐藏。

我试过这个：当下拉列表打开时，引导程序会向 li 标签添加一个新类（"open"）; 所以使用 js（classList.contains） 来检查类"open"是否被添加到 li 标签中，

if （listArr[i].classList.contains（'open'））

如果是这样，那么它应该使"spacer1"可见。

$（"#spacer1"）.css（"显示"， "块"）;

我已经搜索了几天，但似乎无法让它工作。真的需要一些帮助。

提前非常感谢...

这是 html

<section id="brouw-proces" class="bg-layou-2">
<div class="container-fluid">
    <div class="brouwen">
        <div class="container-fluid">
            <!-- ================dropdown-menu============== -->
            <div class="navbar brouwen-navbar navbar-inverse" role="navigation">
                <div class ="container">
                    <div class="brouwen-nav">
                        <ul id="brouwen-Nav-List" class= "nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class = "dropdown-toggle" data-toggle = "dropdown">Mouten<b class = "caret"></b></a>
                                <ul>
                                    <li><a href = "#">Zicht</a></li>
                                    <li><a href = "#">Gehoor</a></li>
                                    <li><a href = "#">Voelen</a></li>
                                    <li><a href = "#">Proeven</a></li>
                                    <li><a href = "#">Ruiken</a></li>
                                </ul>
                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">vergisten<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>
                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">vergisten<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>
                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Lageren<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>
                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Dealcoholisatie<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>
                            </li>
                        </ul><!-- /end of brouwen-Nav-List -->
                    </div><!--brouwen navigation menu -->                           
                </div> <!-- /container -->
            </div>
            <!-- ==============dropdown-menu================ -->
        </div>
    </div><!-- /brouwen -->
    <div id="spacer1"></div> <!-- the div that sopoused to hide and show 
    simultaniously with the dropdown menu -->
</div><!-- /container-fluid -->

.js

<script>
$(document).ready(function(){
    var brouwenNavList = document.getElementById('brouwen-Nav-List');
    var listArr = brouwenNavList.getElementsByTagName('li');
    for (var i=0; i<listArr.length; i++){
        function doIt(){
            if (listArr[i].classList.contains('open')){
                $("#spacer1").css("display", "block");
            } else{
                $("#spacer1").css("display", "none");
            }
        }
    }
});

应该显示的div 被 CSS 设置为不由 defauld 显示

#spacer1{
height: 300px;
width: auto;
background-color: transparent;
display: none;

}

解决方案之一可能是从下拉插件中侦听自定义事件： 引导下拉列表事件

基于此，您可以通过以下方式显示/隐藏垫片：JSFiddle

$(document).ready(function(){
    var spacer = $('#spacer1');
    var navList = $('#brouwen-Nav-List');
    navList.on('show.bs.dropdown',function(){
        console.log('show');
        spacer.show();
    });
    navList.on('hide.bs.dropdown',function(){
        console.log('hide');
        spacer.hide();
    });
});

让我知道这是否是您预期的行为。

谢谢

相关文章：