干扰<button>标签

Question

我的搜索和日历按钮似乎有问题。他们使用的功能与我的博客存档按钮中的功能相同。

    <script>
    $('button').each(function() {

      /* "each" in jQuery lets us apply what's inside here to each button individually without having to give them each their own names. Imagine this code going down the line and repeating everything below for each of the buttons. */

      var $thisButton = $(this);

      /* To refer to the individual button inside of this section we can use $(this), but to try and make the rest of this more clear, I'm going to rename $(this) to $thisButton */

      $thisButton.click(function() {

        var $thisButtonsDropdown = $thisButton.siblings();

        /* Sibling here means "on the same level as the button." We need to do this to find the section of months or links that matches this button we clicked, so that we slide up/down the right one--the one we want is the one that is next to it, its sibling. */

        /* This part should be a little familiar! */
        if ($thisButtonsDropdown.is(':visible')) {
          $thisButtonsDropdown.slideUp();
          $thisButton.removeClass('flip');
        } else {
          $thisButtonsDropdown.slideDown();
          $thisButton.addClass('flip');
        }
      });
    });
    </script>

有人知道为什么会这样吗？这是我的搜索和日历按钮的代码：

/* Start JS Calendar */

.calendar-wrapper {
  width:175px;
  height:175px;
  margin:3em auto;
  margin-left:20px;
  padding:2em;
  border:0px solid @calendar-border;
  border-radius:5px;
  background:none;
  position:absolute;
    top:0px;
    left:20px;
    z-index:100;
  cursor:text;

}
table {
  clear:both;
  width:208px;
  height:100px;
  border:5px double #000;
  border-radius:0px;
  border-collapse:collapse;
  color:@calendar-color;
  background:white;
  position:absolute;
    top:0px;
    left:0px;
  cursor:text;
}
td {
  font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
  height:8px;
  text-align:center;
  vertical-align:middle;
  border-right:1px solid black;
  border-top:1px solid black;
  width:100% / 7;
  cursor:text;
}
td.not-current {
  color:#ccc;
  font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
  cursor:text;
  font-size:17px;
}
td.normal {}
td.today {
  font-weight:bold;
  color:#98d6e3;
  font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
  text-shadow:none;
  cursor:text;
}

thead td {
  border:none;
  color:#6871b8;
  text-transform:capitalize;
  text-shadow:0px 2px 1px #aaa;
  font-size:1.2em;
  font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
  background:rgba(255, 255, 255, 1);
  padding-left:6px;
  padding-right:6px;
  padding-top:3px;
  width:275px;
  cursor:text;
  z-index:0px;
}

#btnPrev {
  background:none;
  border:none;
  color:rgba(153, 159, 207, 1);
  font-family:Laila, Segoe UI Light, Arial, Segoe UI, Georgia, Verdana;
  font-weight:normal;
  font-size:1em;
  float:left;
  margin-bottom:20px;
  position:absolute;
  top:10px;
  left:29px;
  z-index:250;
}
#btnNext {
  background:none;
  border:none;
  color:rgba(153, 159, 207, 1);
  font-family:Laila, Segoe UI Light, Arial, Segoe UI, Georgia, Verdana;
  font-weight:normal;
  font-size:1em;
  float:right;
  margin-bottom:20px;
  position:absolute;
  top:10px;
  left:227px;
  z-index:250;
}
#btnPrev:hover {
  border:none;
  outline:none;
  font-size:1em;
  cursor:pointer;
  font-family:Laila, Segoe UI Light, Arial, Segoe UI, Georgia, Verdana;
  text-shadow:0px 0px 2px #fff, 0px 0px 2px #fff;
  text-transform:none;
  transition:all 0.3s ease;
  color:white;
  z-index:100;

}

#btnNext:hover {
  border:none;
  outline:none;
  font-size:1em;
  cursor:pointer;
  font-family:Laila, Arial, Segoe UI, Georgia, Verdana;
  text-shadow:0px 0px 2px #fff, 0px 0px 2px #fff;
  text-transform:none;
  transition:all 0.3s ease;
  color:white;
  z-index:100;
}


.days {
  color:#7b6f7d;
  background:#fff;
  cursor:text;
  font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
}

/* End JS Calendar */ 

<div class="calendar-wrapper">
  <button id="btnPrev" type="button">&#10210;</button>
      <button id="btnNext" type="button">&#10211;</button>
  <div id="divCal"></div>
</div>

我的猜测是因为他们不确定使用同一标签的事实。有谁知道可能发生了什么，并且肯定会发生什么？