<分区>
<分区>
单击 anchor 可以显示和隐藏两个图标？？我有一个 Foundation Accordion，当我单击选项卡(它们是 anchor )时，我需要显示图标以消失，反之亦然。我不知道为什么浏览器控制台告诉我 'addEventListener' 为 null，因为元素存在并且是一个 anchor 。我想用 javascript 来做，但如果不可能，我会使用 Jquery。这是我尝试过但没有成功的方法。
<dd class="accordion-navigation">
<a href="#panel1a" class="tab-table" role="tab" id="panel1a-heading" aria-controls="panel1a" id="first-tab-accordion">Subastas Activas
<i class="fa fa-chevron-down styled-tab-icon arrow-content-hidden" id="arrow-content-hidden-first"></i>
<i class="fa fa-chevron-up styled-tab-icon arrow-content-shown" id="arrow-content-shown-first"></i>
</a>
// More stuff...
</dd>
这是CSS
.arrow-content-hidden {
}
.arrow-content-shown {
display: none;
}
这是js
<script>
function toggle() {
var arrowTabDown = document.getElementById("arrow-content-hidden-first");
var arrowTabUp = document.getElementById("arrow-content-shown-first");
if (arrowTabDown.style["display"] == 'none') {
arrowTabDown.style["display"] = 'block';
arrowTabUp.style["display"] = 'none';
} else {
arrowTabDown.style["display"] = 'none';
arrowTabUp.style["display"] = 'block';
}
};
document.getElementById("first-tab-accordion").addEventListener("click", toggle, false);
</script>
最佳答案
起初:
你有 2 个用于 #first-tab-accordion 的 id，然后你应该在加载标签后运行脚本，这样它就可以工作了:
<dd class="accordion-navigation">
<a href="#panel1a" class="tab-table" role="tab" aria-controls="panel1a" id="first-tab-accordion">Subastas Activas
<i class="fa fa-chevron-down styled-tab-icon arrow-content-hidden" id="arrow-content-hidden-first"></i>
<i class="fa fa-chevron-up styled-tab-icon arrow-content-shown" id="arrow-content-shown-first"></i>
</a>
</dd>
<script>
function toggle() {
var arrowTabDown = document.getElementById("arrow-content-hidden-first");
var arrowTabUp = document.getElementById("arrow-content-shown-first");
if (arrowTabDown.style["display"] == 'none') {
arrowTabDown.style["display"] = 'block';
arrowTabUp.style["display"] = 'none';
} else {
arrowTabDown.style["display"] = 'none';
arrowTabUp.style["display"] = 'block';
}
};
document.getElementById("first-tab-accordion").addEventListener("click", toggle, false);
</script>
关于javascript - 通过单击 anchor 显示和隐藏两个图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31406620/
相关文章：
javascript - 为什么由 setTimeout 拆分的工作负载仍然会卡住浏览器？
javascript - require.js、AMD 和 "missing license key"使用 jwPlayer 7
jquery - JavaScript : how to change form action attribute value based on selection?
javascript - 当用户滚动到 T&C 页面底部时启用复选框？
javascript - 当我直接在控制台上键入而不是在 JavaScript 代码中键入时，可以使用 resizeTo 调整弹出窗口的大小