【发布时间】：2021-09-01 10:24:47
【问题描述】：
我正在尝试在我的网页中使用手风琴菜单。单击时应该一次只显示一个面板，并且必须使用onclick函数调用js代码。当我在 html 中的脚本标签之间添加 js 代码时，一切正常，但我需要使用 onclick 并从外部 .js 文件调用脚本。但是，当我这样做时，代码星号仅在第二次单击后才起作用。如何解决？ （没有 jquery）
注意： JS 文件必须在 html 的 <head> 部分调用。
HTML：
<button class="course-accordion" onclick="openaccordion()">Title 1</button>
<div class="course-panel">Text 1</div>
<button class="course-accordion" onclick="openaccordion()">Title 2</button>
<div class="course-panel">Text 2</div>
<button class="course-accordion" onclick="openaccordion()">Title 3</button>
<div class="course-panel">Text 3</div>
CSS：
button.course-accordion {
background-color: transparent;
color: white;
cursor: pointer;
padding: 8px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 22px;
font-weight: 600;
transition: 0.4s;
font-family: "Raleway";
line-height: 1.5em;
text-transform: none;
letter-spacing: 0px;
font-weight: 600;
font-style: normal;
}
/*When the button is active or mouse hovers*/
button.course-accordion.active, button.course-accordion:hover {
background-color: rgba(166,166,166,0.6);
}
/*button not active*/
button.course-accordion:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
/* minus button */
button.course-accordion.active:after {
content: "\2212";
}
div.course-panel {
padding: 0 18px;
background-color: transparent;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width: 96%;
font-family: "Raleway";
font-size: 15px;
line-height: 1.6em;
letter-spacing: .4px;
font-weight: 400;
font-style: normal;
color: rgba(0,0,0,.88);
}
JAVASCRIPT：
function openaccordion() {
//this is the button
var acc = document.getElementsByClassName("course-accordion");
var i;
for (i = 0; i < acc.length; i++) {
//when one of the buttons are clicked run this function
acc[i].onclick = function() {
//variables
var panel = this.nextElementSibling;
var coursePanel = document.getElementsByClassName("course-panel");
var courseAccordion = document.getElementsByClassName("course-accordion");
var courseAccordionActive = document.getElementsByClassName("course-accordion active");
/*if pannel is already open - minimize*/
if (panel.style.maxHeight){
//minifies current pannel if already open
panel.style.maxHeight = null;
//removes the 'active' class as toggle didnt work on browsers minus chrome
this.classList.remove("active");
} else { //pannel isnt open...
//goes through the buttons and removes the 'active' css (+ and -)
for (var ii = 0; ii < courseAccordionActive.length; ii++) {
courseAccordionActive[ii].classList.remove("active");
}
//Goes through and removes 'activ' from the css, also minifies any 'panels' that might be open
for (var iii = 0; iii < coursePanel.length; iii++) {
this.classList.remove("active");
coursePanel[iii].style.maxHeight = null;
}
//opens the specified pannel
panel.style.maxHeight = panel.scrollHeight + "px";
//adds the 'active' addition to the css.
this.classList.add("active");
}
}//closing to the acc onclick function
}//closing to the for loop.
}
【问题讨论】：
-
那是因为您只是在
openaccordion函数的内部 添加了提供实际手风琴功能的点击处理程序。一开始这没什么意义。 -
你能只给我们看那部分吗？开始阅读整个代码真的很难
-
每次单击按钮都会向按钮添加三个单击处理程序。单击处理程序通常在页面加载时添加一次。
-
感谢您的回答。我忘了提一个重要的细节：js 文件必须在 html 的 部分调用
标签： javascript html css accordion