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”）无法正常工作，因为边框线由浏览器“缓慢”绘制。

你知道如何解决高亮和边框动画的问题吗？

非常感谢:-)

来源

2015-07-11 Michi

尝试任何帮助添加.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/

来源

2015-07-11 17:28:22

它的工作原理。非常感谢:-) – Michi

我很高兴帮助@Michi –

jQuery的手风琴

回答

相关问题