个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我目前正在创建一个下拉菜单，因此我希望通过 Javascript 添加类来单击该菜单，但 classList 根本不起作用。我试了很多时间但做不到。另外，如果我添加 style.display = "block"，那么它就可以工作了!我想不通!请帮助我!
document.getElementById('dbtn').addEventListener('click', function() {
document.getElementById('d-content').classList.toggle('show');
});#wrapper {
position: relative;
display: inline-block;
}
#dbtn {
background-color: #F44336;
font-size: 27px;
font-family: 'Droid Sans', sans-serif;
border: none;
padding: 0.3em 0.6em;
color: #FFFFFF;
cursor: pointer;
outline: none;
}
#d-content {
position: absolute;
display: none;
background-color: #F44336;
font-family: 'Droid Sans', sans-serif;
font-size: 22px;
border-top: 2px solid #FFFFFF;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
#d-content a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 0.3em 5em 0.3em 0.3em;
}
#d-content a:hover {
background-color: darkorchid;
}
.show {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu</title>
</head>
<body>
<div id="wrapper">
<input type="button" id="dbtn" value="Select..." />
<div id="d-content" class="drop">
<a>USA</a>
<a>Canada</a>
<a>Europe</a>
</div>
</div>
</body>
</html>最佳答案
浏览器根据选择器顺序和选择器权重计算 css 属性。在您的情况下，#id 选择器会覆盖您的类选择器。
.show {
display: block !important;
}
或者最好根本不要使用 important:
#d-content.show{
display: block ;
}
您可以阅读更多关于选择器权重的信息 here .您也可以随时在 dev console 中查看这些内容. 
关于单击按钮时 JavaScript classList 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44901931/
25
4
0
我不明白为什么我使用的 classList.toggle 的行为类似于 classList.add。当我单击具有下拉菜单的列表项时，它只会在第一次单击时进行更改，而在第二次单击时不会进行任何更改。 v
我有一个元素列表 (ul, li)，其中一个类在您单击该元素时设置左边框和粗体突出显示。 当您单击列表中的不同项时，我想将样式重置为原始项，使其恢复正常，然后在刚刚单击的事件项上设置新样式。 奇怪的是
正如标题所说。我似乎看不出两者之间的区别，也看不出 toggle 的第二个参数有什么意义。 谁能给我解释一下？ 最佳答案 没有区别； toggle 的第二个参数是为了让这种事情更方便: if (h
这个问题在这里已经有了答案: How can a read only property(element.classList) can be modified or assigned to some
我有一个“+”按钮，单击该按钮时，会触发创建一个带有输入和 2 个按钮的 block ，一个用于验证输入，一个用于删除输入。 //我的代码看起来几乎像这样: addBtn.addEventLi
我试图通过创建具有 3 个执行上下文的堆栈来制作执行堆栈如何在 Javascript 上工作的原理图。全局、执行 A 和执行 B。为此，我构建了一组嵌套的 div 并添加了一个 displayNone
我正在努力提高我的 JavaScript 技能，但我无法解决这个问题。我想在 button.terug 时在我的 body 中显示图像被点击。 我尝试使用 classList.toggle()切换类名
这是我使用 .classList.contains() 时遇到的错误 Uncaught TypeError: Cannot read property 'contains' of undefined
我正在尝试使用 js 和 css 创建一个简单的选项卡式功能。单击选项卡按钮时，它应该从控件中删除所有 active 类，然后仅将 active 类添加到所选元素。 但是，当我尝试删除 active
所以这个程序的重点是询问学生他们的名字，他们这学期上了多少门课，然后它要求每门课的名字。我的问题是我无法让 classList 数组工作并在程序输出中将类名显示给用户。我已经标记了我认为问题的来源，我
我正在尝试做一个简单的 slider ，但我遇到了这个问题: Uncaught TypeError: Cannot read property 'classList' of undefined 这是我
我试图根据变量是否等于 0 添加和删除一个类。这是我的代码: import { LitElement, html } from 'lit-element'; class SelectCounter e
下面是通过 DOM 获取一些元素的代码片段。我只是附加一个简单的 onclick，它应该将“隐藏”属性添加到每个检索到的元素的 classList 中。 HTML: Explorin
我正在尝试创建一个循环，每次执行时都会更改元素的类 HTML Random JS const all_buttons = document.getElementsByTagName('button
我尝试使用 classList.contains 搜索特定类的 DOM 元素，但出现此错误: "TypeError: Cannot read property 'contains' of undefi
我尝试使用 classList.remove 显示测验结果，但这不起作用。 这是我的 HTML。结果位于一个 div 内，该 div 内还有 5 个具有类的其他 div。这个想法是，当提交答案时，其中
我想在调整浏览器大小时删除特定屏幕尺寸上的单击事件监听器。 问题是下面的代码在我刷新页面并且期望的结果就在那里的情况下工作。然而，在调整浏览器大小时，它会保持在低于所需宽度时可点击或超过所需宽度时不可
我试图让扩展面板仅在点击箭头时展开，但是当我尝试编译它时，此功能 private _isExpansionIndicator(target: EventTarget): boolean { c
我有一个像这样的元素: 我想删除所有以“bg-color-”开头的类，所以我只需循环遍历所有类，然后删除匹配的类: var element = document.getElement......;
我在使用 classList.toggle 和 Font Awesome 图标时遇到了一个非常令人困惑的问题。我希望我的汉堡菜单在单击时更改为 X，并且我正在尝试使用 JavaScript 函数来完成
我是一名优秀的程序员,十分优秀！