不同浏览器中的边框底部手风琴面板答案

【问题标题】：Border-Bottom Accordion Panel in different browsers不同浏览器中的边框底部手风琴面板
【发布时间】：2015-07-18 08:58:16
【问题描述】：

我有以下 jQuery Accordion，我想在其中打开多个部分：

$(document).ready(function() {
  $(".accordion").accordion({
    collapsible: true,
    active: false,
    animate: 500,
  }).on("click", "div", function(e) {
    $("div.ui-accordion-header").each(function(i, el) {
      if ($(this).is(".ui-state-active")) {
        $(this).find(".panel-icon").html("-")
      } else {
        $(this).find(".panel-icon").html("+")
      }
    })
  });

});

.accordion {
  float: left;
  line-height: 2.0;
  width: 100%;
}
.js_button {
  width: 99%;
  padding-left: 1%;
  font-weight: bold;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  margin-top: 1%;
  outline-width: 0;
}
.panel {
  width: 99%;
  height: 20%;
  padding-left: 1%;
  font-weight: bold;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 0px;
  border-bottom-width: 1px;
}

<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

</head>

<body class="body">


  <div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Part1</div>
    <span class="panel">
        					<p>Content1</p>
        					</span>
  </div>

  <div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Part2</div>
    <span class="panel">
        					<p>Content2</p>
        					</span>
  </div>
</body>

</html>

手风琴本身工作正常，但是当我使用 Chrome、Safari 或 Opera 时，我的边框底部出现以下问题面板（内容）：

当我单击“按钮”并且面板滑出时，边框底部不存在。在幻灯片动画结束时，最终绘制了 bordor-bottom。我怎样才能避免这种情况，让边框底部从动画开始就在那里，就像在 Firefox 和 IE 中一样？

感谢您的帮助:-)

【问题讨论】：

这里也是一个jsfiddle：jsfiddle.net/ypv8yow1
我真的不知道，但examples of jQuery UI itself 似乎表现出相同的行为，虽然很难说，因为它们更快且颜色更浅。
刚刚更新了我的答案以使动画更流畅 - 希望对您有所帮助？

标签： jquery html css

【解决方案1】：

尝试将边框添加到 .accordion div 并删除其他边框：

JSFiddle

.accordion {
    float: left;
    line-height: 2.0;
    width: 100%;
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
     margin-top: 1%;
}
.js_button {
    width: 99%;
    padding-left: 1%;
    font-weight: bold;
    outline-width: 0;
    position: relative;
}
.js_button:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
}
.panel {
    width: 99%;
    height: 20%;
    padding-left: 1%;
    font-weight: bold;
    overflow: hidden;
}

注意到您的动画非常生涩 - 主要是因为您使用跨度作为面板。将其切换为 div（或将 span 设置为 display:block），动画应如上所示平滑。

另外，上面的:after 用于按钮的边框底部。向按钮添加标准边框底部只会使边框加倍，因此必须这样做。当然有更好的方法，不过等我不累了再回来:)

【讨论】：

您好 wickywills，非常感谢您到目前为止的回答。它工作得很好。只有在 Safari 中还有一个小错误。向下滑动面板后，您可以看到按钮上的边框底部没有以右边框结束，这会导致非常小的间隙。此外，我会将这个问题再开放 2-3 天，所以当你不再累的时候，也许你可以给我一个更好的解决方案；-) 否则我会检查答案箭头:-)
@Michi 请查看更新的 JSFiddle。添加了box-sizing: border-box 以解决按钮上的填充问题。仍然想不出用这种设置在按钮上做边框的更好方法。一切都取决于手风琴的外观设计，这将导致不同的解决方案。不过，这个解决方案在你的情况下应该没问题，我看不到任何其他浏览器问题:)