jQuery的手风琴
问题描述:
我有以下的jQuery手风琴,我可以有多个部分同时开放:jQuery的手风琴
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”的边框在您点击它时突出显示。 此外,当您想单击最后一个手风琴(本例中为“Part2”)时,内容的动画(在本例中为“Content2”)无法正常工作,因为边框线由浏览器“缓慢”绘制。
你知道如何解决高亮和边框动画的问题吗?
非常感谢:-)
答
尝试任何帮助添加.js_button {轮廓宽度: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/
它的工作原理。非常感谢:-) – Michi
我很高兴帮助@Michi –