我有以下 jQuery Accordion ，我可以同时打开多个部分:
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>
<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>
JQuery
$(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("+")
}
})
});
});
CSS
.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%;
}
.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;
}
Accordion 在 Explorer 和 Firefox 中运行良好。 但是，在 Chrome、Opera 和 Safari 中，“js_button”的边框会在您单击后突出显示。 此外，当您想要单击最后一个 Accordion (在本例中为“Part2”)时，内容的动画(在本例中为“Content2”)无法正常工作，因为边界线被浏览器缓慢“绘制”。
你知道如何用突出显示和边框动画解决这个问题吗？
非常感谢您的帮助:-)
最佳答案
尝试添加 .js_button { outline-width: 0; 到您的 css，这将删除突出显示。
.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;
}
我已经更新了你的代码检查这里 JSFiddle http://jsfiddle.net/ypv8yow1/
关于不同浏览器中的 jquery Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31359728/