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的手風琴

回答

相關問題