我有以下 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>Accordion 本身工作正常，但是当我使用 Chrome、Safari 或 Opera 时，我的边框底部出现以下问题面板(内容):
当我单击“按钮”并且面板滑出时，底部边框不存在。在幻灯片动画结束时，bordor-bottom 终于被绘制出来了。 我怎样才能避免这种情况，让边框底部像在 Firefox 和 IE 中一样从动画开始就在那里？
感谢您的帮助:-)
最佳答案
尝试将边框添加到 .accordion div 并移除其他边框:
.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;
}
注意到您的动画非常不稳定 - 主要是因为您使用 span 作为面板。将其切换为 div(或将跨度设置为 display:block)，动画应该如上所示平滑。
此外，上面的 :after 用于按钮的 border-bottom。向按钮添加标准边框底部只会使边框加倍，因此必须这样做。当然有更好的方法，但是当我不那么累的时候我会回来的:)
关于jquery - 不同浏览器中的边框底部 Accordion 面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31489508/