我有这个功能可以创建加深月份的按钮。如果是 2 月，则 28 个按钮，3 月，则 31 个按钮，依此类推。然后我有这个创建 Accordion 的功能。但是，我的问题是我无法将它们都连接起来。我希望由 javascript 创建的按钮用作 Accordion 。不太确定该怎么做。所以我的问题是如何将我的 Accordion 功能用于根据月份创建的按钮？
下面的代码片段和按钮的 jsfiddle:https://jsfiddle.net/20psfauc/6/
按钮的功能和html:
var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June",
"July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];
function drawTable(forDate) {
var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
var cellsToDraw = daysInMonth;
var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
var table = document.getElementById("table");
table.innerHTML = "";
for (var r = 0; r < (daysInMonth / 7); r++) {
var newRow = document.createElement("tr");
table.appendChild(newRow);
for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
var day1 = ("0" + (c + 1)).slice(-2);
var textarea = document.createElement('button')
textarea.setAttribute("placeholder", day1 );
textarea.setAttribute("class", "row");
//textarea.setAttribute("id", some_value);
newRow.appendChild(textarea);
textarea.setAttribute("name", "day");
textarea.setAttribute("day", newdate + "-" + day1 );
textarea.innerHTML = newdate + "-" + day1;
cellsToDraw--;
}
}
}
window.onload = function() {
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable(showDate );
};
function next() {
if (showDate.getMonth() == 11) {
showDate.setMonth( 0 );
showDate.setFullYear( showDate.getFullYear()+1 );
} else {
showDate.setMonth( showDate.getMonth()+1 );
}
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable( showDate );
}
function daysInMonth(month, year) {
var days;
switch (month) {
case 1: // Feb, our problem child
var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
days = leapYear ? 29 : 28;
break;
case 3:
case 5:
case 8:
case 10:
days = 30;
break;
default:
days = 31;
}
return days;
}
<h1 id="displayingMonth"></h1>
<table id="table" cellspacing="0" cellpadding="0" border-collapse="collapse";>
Accordion 的功能
var acc = document.getElementsByClassName("row");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
var active = checkIfAnyVisible();
if (active) {
active.className = 'panel';
active.style.maxHeight = null;
}
if (panel.style.maxHeight){
panel.style.maxHeight = null;
panel.className = 'panel';
} else if (!checkIfAnyVisible()) {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.className = 'panel active';
}
});
}
function checkIfAnyVisible() {
for (var i=0; i<acc.length; i++) {
if (acc[i].nextElementSibling.className.includes('active')) {
return acc[i].nextElementSibling;
} else {
continue;
}
}
return false;
}.row {
color: grey;
width: 13%;
transition: 0.4s;
margin: 0 auto;
}
.panel {
max-height: 0;
transition: max-height 0.2s ease-out;
overflow: hidden;
width: 100px;
float: left;
background-color: yellow;
}<button class="row"> 1</button>
<div class="panel">
<p>1 content</p>
</div>
<button class="row"> 2</button>
<div class="panel">
<p>2 content </p>
</div>
<button class="row"> 3</button>
<div class="panel">
<p>3</p>感谢所有帮助! :)
最佳答案
我结合了功能，做了一些小的调整。这是你的意思吗？
<!doctype html>
<html>
<head>
<style>
.row { color: grey; width: 13%; transition: 0.4s; margin: 0 auto;}
.panel { max-height: 0; transition: max-height 0.2s ease-out; overflow: hidden; width: 100px; float: left; background-color: yellow; display: inherit;}
</style>
</head>
<body>
<h1 id="displayingMonth"></h1>
<button id="btn" type="button" name="btnPrev" onclick="prev();">< Prev</button>
<button id="btn" type="button" name="btnNext" onclick="javascript:next();"> Next ></button>
<table id="table" cellspacing="0" cellpadding="0" border-collapse="collapse"></table>
<script>
var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];
var theForm =
'<form><fieldset><legend>Note For today</legend><input type="text" placeholder="enter something"/></fieldset><input type="submit" value="submit"/></form>'
function drawTable(forDate) {
var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
var cellsToDraw = daysInMonth;
var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
var table = document.getElementById("table");
table.innerHTML = "";
for (var r = 0; r < (daysInMonth / 7); r++) {
var newRow = document.createElement("tr");
table.appendChild(newRow);
for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
var day1 = ("0" + (c + 1)).slice(-2);
var textarea = document.createElement("button");
textarea.setAttribute("placeholder", day1 );
textarea.setAttribute("class", "row");
newRow.appendChild(textarea);
textarea.setAttribute("name", "day");
textarea.setAttribute("day", newdate + "-" + day1 );
textarea.innerHTML = newdate + "-" + day1;
var textarea1 = document.createElement("div");
textarea1.setAttribute("class", "panel");
newRow.appendChild(textarea1);
textarea1.innerHTML = theForm;
cellsToDraw--;
}
}
var acc = document.getElementsByClassName("row");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
var active = checkIfAnyVisible();
if (active) {
active.className = 'panel';
active.style.maxHeight = null;
}
if (panel.style.maxHeight){
panel.style.maxHeight = null;
panel.className = 'panel';
} else if (!checkIfAnyVisible()) {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.width = "100%";
panel.className = 'panel active';
}
});
}
function checkIfAnyVisible() {
for (var i=0; i<acc.length; i++) {
if (acc[i].nextElementSibling.className.includes('active')) {
return acc[i].nextElementSibling;
} else {
continue;
}
}
return false;
}
}
window.onload = function() {
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable(showDate);
};
function next() {
if (showDate.getMonth() == 11) {
showDate.setMonth( 0 );
showDate.setFullYear( showDate.getFullYear()+1 );
} else { showDate.setMonth( showDate.getMonth()+1 ); }
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable( showDate );
}
function prev() {
if (showDate.getMonth() === 0) {
showDate.setMonth( 11 );
showDate.setFullYear( showDate.getFullYear()-1 );
} else { showDate.setMonth( showDate.getMonth()-1 );}
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable( showDate );
}
function daysInMonth(month, year) {
var days;
switch (month) {
case 1: // Feb, our problem child
var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
days = leapYear ? 29 : 28;
break;
case 3:
case 5:
case 8:
case 10:
days = 30;
break;
default:
days = 31;
}
return days;
}
</script>
</body>
</html>
编辑:当用户单击按钮时添加了一个基本表单 - 正如您对评论的要求。
EDIT2:点击另一个按钮时切换。
关于javascript - 自动创建按钮并将它们制作成 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49087357/