Question

我有以下jQuery Accordion，我希望打开多个部分：

＆＃13;

$(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("+")
      }
    })
  });

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Accordion本身运行正常，但当我使用 Chrome ， Safari 或 Opera 时，我的边框底部出现以下问题小组（内容）：

当我点击＆＃34;按钮＆＃34;面板滑出边框底部不存在。在幻灯片动画结束时，最终绘制了bordor-bottom。我怎样才能避免这种情况，让动画一开始就像在Firefox和IE中那样使用border-bottom？

感谢您的帮助： - ）

Answer 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（或将范围设置为display:block），动画应如上所述平滑。

此外，上面的:after用于按钮上的边框底部。在按钮上添加标准边框底部只会使边框加倍，因此必须这样做。当然有更好的方法，但是当我不那么累的时候我会回来的。）

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

1 个答案: