Javascript HTML下拉菜单文本不显示
你好,我有一个关于html下拉菜单的问题 我只是按照w3学校的指示创建下拉菜单。() 一切正常,但当我点击菜单按钮时,我无法看到下面的菜单列表。我能做些什么来解决这个问题吗Javascript HTML下拉菜单文本不显示,javascript,html,css,Javascript,Html,Css,你好,我有一个关于html下拉菜单的问题 我只是按照w3学校的指示创建下拉菜单。() 一切正常,但当我点击菜单按钮时,我无法看到下面的菜单列表。我能做些什么来解决这个问题吗 函数下拉菜单(){ document.getElementById(“myDropdown”).classList.toggle(“show”); } //如果用户在下拉列表之外单击,请关闭下拉列表 window.onclick=函数(事件){ 如果(!event.target.matches('.dropbtn')){
函数下拉菜单(){
document.getElementById(“myDropdown”).classList.toggle(“show”);
}
//如果用户在下拉列表之外单击,请关闭下拉列表
window.onclick=函数(事件){
如果(!event.target.matches('.dropbtn')){
var dropdowns=document.getElementsByClassName(“下拉内容”);
var i;
对于(i=0;i
.dropbtn{
背景色:#3498DB;
颜色:白色;
填充:13px;
字体大小:13px;
边界:无;
位置:绝对位置;
右:-490px;
顶部:8px;
背景色:#0076B1;
边界半径:25%;
光标:指针;
过渡:0.3s;
}
.dropbtn:悬停,.dropbtn:焦点{
背景色:#2980B9;
}
.下拉列表{
位置:相对位置;
显示:内联块;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:白色;
最小宽度:160px;
溢出:自动;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
右:-490px;
顶部:52px;
}
.下拉内容a{
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
}
.下拉列表a:悬停{背景色:#ddd}
.show{display:block;}
变更日期
滤器
CSS
.dropbtn{
背景色:#3498DB;
颜色:白色;
填充:16px;
字体大小:16px;
边界半径:25%;
光标:指针;
}
.dropbtn:悬停,.dropbtn:焦点{
背景色:#2980B9;
}
.下拉列表{
位置:相对位置;
显示:内联块;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:绿色;//更改颜色,使用白色或黑色
最小宽度:160px;
溢出:自动;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
.下拉内容a{
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
}
.下拉列表a:悬停{背景色:#ddd}
.show{display:block;}
HTML
更改数据过滤器
JS
/*当用户单击按钮时,
在隐藏和显示下拉内容之间切换*/
函数myFunction(){
document.getElementById(“myDropdown”).classList.toggle(“show”);
}
//如果用户在下拉列表之外单击,请关闭下拉列表
window.onclick=函数(事件){
如果(!event.target.matches('.dropbtn')){
var dropdowns=document.getElementsByClassName(“下拉内容”);
var i;
对于(i=0;i
如果您想更改这两个下拉式内容中的一个,只需使用html样式即可
更改为:
我在代码片段中使用了您的代码,它看起来工作正常。请参见下面的代码片段
函数下拉菜单(){
document.getElementById(“myDropdown”).classList.toggle(“show”);
}
//如果用户在下拉列表之外单击,请关闭下拉列表
window.onclick=函数(事件){
如果(!event.target.matches('.dropbtn')){
var dropdowns=document.getElementsByClassName(“下拉内容”);
var i;
对于(i=0;i
.dropbtn{
背景色:#3498DB;
颜色:白色;
填充:13px;
字体大小:13px;
边界:无;
位置:绝对位置;
右:-490px;
顶部:8px;
背景色:#0076B1;
边界半径:25%;
光标:指针;
过渡:0.3s;
}
.dropbtn:悬停,.dropbtn:焦点{
背景色:#2980B9;
}
.下拉列表{
位置:相对位置;
显示:内联块;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:白色;
最小宽度:160px;
溢出:自动;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
右:-490px;
顶部:52px;
}
.下拉内容a{
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
}
.下拉列表a:悬停{背景色:#ddd}
.show{display:block;}
更改日期过滤器
很抱歉,它给了我同样的结果。现在试试,用我发现的文本位于页面顶部,并且被其他东西隐藏。你在使用另一个文本吗?因为如果你在另一个文本中设置一个,它可以更改第二个div的布局。首先放置下拉div:)
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border-radius: 25%;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: green; //change your color, use white or black
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
</style>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Change Data Filter</button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><font style="color:red">Date Center</font></a>
<a href="#">Date Slider</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>