Question

我有以下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;
}

手风琴在Explorer和Firefox中运行良好。但是，在 Chrome ， Opera 和 Safari 中，＆＃34; js_button＆＃34;的边界点击它后会突出显示。此外，当你想要点击最后一个手风琴时（在这种情况下＆＃34; Part2＆＃34;）内容的动画（在这种情况下＆＃34; Content2＆＃34;）因为边框线而无法正常工作是＆＃34;绘制＆＃34;慢慢地通过浏览器。

您是否知道如何使用突出显示和边框动画解决此问题？

非常感谢您的帮助： - ）

Answer 1

尝试添加 .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手风琴

1 个答案: