javascript - Onclick 函数在 <span> 中不起作用?

标签 javascript html css

我正在使用 onclick 函数在我的移动网站上下拉一个简单的列表,但它不起作用 - 代码如下。奇怪的是,我旁边还有其他格式完全相同的东西,而且效果很好(当然,所有名称都不同)。

显然“show3”类没有被切换,因为我可以更改“display: none;”到 .incoming-listc 中的“display: block”,它显示得很好。但是,当我单击“传入”范围时,没有任何反应!

HTML:

<div class="mobile-incoming">
<span onclick="myFunction3()">Incoming <i class="fa fa-angle-down"></i></span>
<div id="incoming-list" class="incoming-listc">
    Updated 5.4.16<br>Goodall RCJ EIR/Adirondack<br>2008 Martin 000-18 Authentic
</div>
</div>

<script>
    function myFunction3() {
        document.getElementById("incoming-list").classList.toggle("show3");
    }
</script>

CSS:

.mobile-incoming {
position: fixed;
top: 0;
right: 60px;
cursor: pointer;
text-align: right;
line-height: 44px;
font-family: "Helvetica Neue", Verdana;
font-size: 0.8em;
font-weight: 200;
color: white;
}

.incoming-listc {
display: none;
position: fixed;
top: 45px;
right: 0;
left: 0;
background: rgba(70, 70, 70, 0.9);
border-bottom: 1px solid white;
}

.show3 {
    display: block;
}

最佳答案

好的,明白了。以防万一以后有人发现它有类似的问题。实际上,我的 CSS 在样式表中的顺序与我粘贴给你们的顺序不同。一旦我将“show3”类放在其他两个类之后,它就神奇地开始工作了。不知道类(class)顺序很重要!

关于javascript - Onclick 函数在 <span> 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37038319/

相关文章:

javascript - 使用 react 按时间间隔更改图像

html - 图像 100% 的屏幕(滚动前)

javascript - 未捕获的类型错误 : Cannot read property 'chooseEntry' of undefined (while developing a chrome extension using fileSystem API)

javascript - 添加 W3C 有效 CSS 时 Internet Explorer 7 卡住

javascript - 当输入到达值时,Jquery 不应用效果

html - 防止 HTML 元素继承父旋转动画

css - Chrome 开发人员工具是否在一个列表中显示所有警告?

javascript - 在函数内部调用外部声明的变量

javascript - 同位素 - 容器宽度变化时的重新布局

javascript - onbeforeunload 与confirm 结合使用时出现问题