自动创建按钮并将其制作成手风琴

时间：2018-03-03 17:57:14

标签： javascript html

我有这个功能可以创建按钮，它取决于它的月份。如果是二月，那么28个按钮，三月，那么31个按钮等等。然后我有这个创造手风琴的功能。但是，我的问题是我无法连接它们。我希望javascript创建的按钮可以作为手风琴使用。不太确定如何做到这一点。所以我的问题是如何将我的函数用于根据月份创建的按钮的手风琴？ 下面的代码片段和按钮的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";>

手风琴的功能

  

 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>

感谢所有帮助！ :)

2 个答案:

答案 0 :(得分：0)

我不确定我是否完全理解你想要在页面上看到什么 - 我尝试将你的代码放在一个jsfiddle中我没有看到根据月份创建的任何按钮，它似乎遗漏了一些代码。

但是 - 如果您希望您的手风琴功能对于为每月的每一天创建的按钮有用，他们需要具有与您当前使用手风琴功能的其他按钮相同的结构。他们需要classname＆＃34; row＆＃34;，因为那样做手风琴工作的事件监听器如何附加。由于您的函数调用this.nextElementSibling，因此每个按钮还需要一个兄弟元素。

更新

感谢小提琴！

因此，在您的代码中，您需要创建按钮并在其上设置属性，而不是要创建＆＃34;面板＆＃34;单击日期按钮时手风琴会上升或下降的元素？我认为重命名＆＃34; textarea＆＃34;更有意义。到＆＃34;按钮＆＃34;并创建一个单独的textarea元素：

var button = document.createElement("button");
var textarea = document.createElement("div");
textarea.setAttribute("class", "panel");
newRow.appendChild(textarea);

然后你可以在按钮上添加一个事件监听器来修改＆＃34;面板＆＃34;。这对我来说不是100％的工作，而是玩弄它：

button.addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = "50px";
    }
});

在css中，我将height: 100px;添加到.panel {}块。 不过，你仍然需要弄清楚如何在日期之下获得黄色块。我希望这有帮助！

另一个更新： 如果你把按钮和textarea放在一个父div中，它们会在另一个下面排成一行，虽然这确实意味着每个按钮都排在另一个之下：

var button = document.createElement("button");
var textarea = document.createElement("div");
var container = document.createElement("div");
button.setAttribute("placeholder", day1 );
button.setAttribute("class", "row");
textarea.setAttribute("class", "panel");
container.setAttribute("class", "container");

newRow.appendChild(container);
container.appendChild(button);
container.appendChild(textarea);

作为旁注，我认为通过查看您的代码，您会尝试创建一个表格，其中表格中的每一行代表一周。现在，所有按钮都在第一行结束。如果检查表，可以看到这个。要解决此问题，您需要将此处的计数器更改为小于7而不是31：for (var c = 0; c < 7 && cellsToDraw > 0; c++) {

当你有它工作时，你可能想要考虑从表中切换并在div中重新创建它。通常情况下，如果我们使用的是表格，我们也会使用<td>，但我不确定这是否可行，因为您希望在每个td下面放置文字。有一个带有按钮和div的桌子感觉有点不对劲。

答案 1 :(得分：0)

我结合了这个功能并做了一些小的调整。这是你的意思吗？ 

<!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();">&lt; Prev</button>
      <button id="btn" type="button" name="btnNext" onclick="javascript:next();"> Next &gt;</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：点击另一个按钮时切换。

相关问题
最新问题