javascript - 隐藏 div 滚动条
问题描述
我有一个 div,如果它具有类 1 和 2,我需要在向上和向下滚动时隐藏它,因为这些类会在页面上显示 div。
<div id="mydiv" class="class1 class2">MyContent</div>
我如何达到这一点?
谢谢
解决方案
Bootstrap 在打开时show
对dropdown-menu
元素进行了分类。window.onscroll
你应该在被解雇时删除这个类。
window.onscroll = (e) => {
var dropdowns = document.querySelectorAll(".dropdown-menu");
for (var i = 0; i < dropdowns.length; i++) {
dropdowns[i].classList.remove("show");
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div>
<p>
BLANK<br/><br/><br/>
BLANK<br/><br/><br/>
BLANK<br/><br/><br/>
</p>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<p>
BLANK<br/><br/><br/>
BLANK<br/><br/><br/>
BLANK<br/><br/><br/>
</p>
</div>
推荐阅读
- python-3.x - 使用 pycharm 在 Django 中创建项目
- java - Spring boot H2 db模式oracle
- google-colaboratory - Google colab 自动更改语言
- javascript - 如何将 JSON 文件转换为使用 Google Apps 脚本分隔的新行?
- javascript - 如何从 JS 中选择一个复选框
- javascript - 自动播放时出现音频错误,如何解决?
- android - 现有圆圈中的弯曲文本
- javascript - 一个函数的函数数组(逻辑合取)
- android - 如果同时调用多次,如何避免多次显示对话框?
- javascript - 将实例中的值作为参数传递