[英]how can I get the li classes inside the bootstrap dropdown menu using the classList.contains from javascript
This is what i'm trying to achive: when i open the dropdow menu a specific div (div id="spacer1") shoud be displayed and when i close the dropdown menu spacer1 should be hidden. 这就是我要达到的目标:当我打开下拉菜单时,应该显示特定的div(div id =“ spacer1”),而当我关闭下拉菜单时,应当隐藏spacer1。
I've tryed this: when the drop down is open bootstrap adds a new class ("open") to the li tag; 我已经尝试过:当下拉菜单打开时,bootstrap将新类(“ open”)添加到li标记中; so used js(classList.contains) to check if the class"open is added to the li tag,
因此使用js(classList.contains)来检查是否将“ open”类添加到li标签中,
if (listArr[i].classList.contains('open')) 如果(listArr [i] .classList.contains('open'))
if so then it should make "spacer1"visible. 如果是这样,则应该使“ spacer1”可见。
$("#spacer1").css("display", "block"); $(“#spacer1”)。css(“ display”,“ block”);
I've been searching for days but can't seem to get it to work. 我一直在寻找几天,但似乎无法正常工作。 Really need some help.
确实需要一些帮助。
Many thanks in advance.... 提前谢谢了....
This is the html 这是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 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 that should be displayed is set not to show by defauld by the css 应当将应显示的div设置为不由css默认显示
#spacer1{
height: 300px;
width: auto;
background-color: transparent;
display: none;
} }
One of the solutions could be listening to the custom events from the dropdown plugin : Bootstrap Dropdowns Event 解决方案之一可能是监听来自下拉插件的自定义事件: Bootstrap Dropdowns Event
And based on this, you can show/hide your spacer this way : JSFiddle 基于此,您可以按以下方式显示/隐藏间隔符: 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();
});
});
Let me know if it's the behavior you expected. 让我知道这是否是您期望的行为。
Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.