jquery – 不同浏览器中的Border-Bottom Accordion Panel

2023年5月22日 253次阅读

我有以下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中那样使用border-bottom？

谢谢你的帮助 ：-)

最佳答案 尝试将边框添加到.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),动画应如上所述平滑.

另外,上面的内容是按钮上的边框底部.在按钮上添加标准边框底部只会使边框加倍,因此必须这样做.当然有更好的方法,但是当我不那么累的时候我会回来的:)

点赞