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; 
}

Аккордеон прекрасно работает в 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 аккордеон в разных браузерах

ответ

Смежные вопросы