更換手風琴看起來不像手風琴

我想我在這裏錯過了一些簡單的東西。最初手風琴看起來很好。我有一個替代和手風琴的Ajax調用，但在替換之後，它看起來不像手風琴。問題摘錄如下。更換手風琴看起來不像手風琴

HTML：

<div id="theAcc"> 
    <h3><a href="#">1</a></h3> 
    <div>One</div> 
    <h3><a href="#">2</a></h3> 
    <div>Two</div> 
    <h3><a href="#">3</a></h3> 
    <div>Three</div>  
</div> 

<button id="btnReplace">Replace</button>

的Javascript：

$(function() { 
    $("#theAcc").accordion(); 
}); 

$("#btnReplace").click(function() { 
    $("#theAcc").html("<h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div>"); 
});

任何反饋表示讚賞。

TIA。

來源

2012-05-03 tzerb

您可能需要調用'.accordion（）''的元素theAcc'再次。當你替換它的html時，你會失去額外的樣式'.accordion（）'添加到元素，所以你必須把它們放回去。在進行HTML替換之前，您可能想調用'.destroy（）'。 –

@Cory，這工作，但我希望有更好的方法。 – tzerb

這裏有一個更新的jsfiddle有你希望看到的行爲：http://jsfiddle.net/5nJH7/5/

更新的代碼是：

$(function() { 
    $("#theAcc").accordion(); 
}); 

$("#btnReplace").click(function() { 
    $("#theAcc") 
     .accordion("destroy"); 
     .html("<h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div>") 
     .accordion(); 
});

你看到的問題，因爲你已經部分被破壞的HTML元素。手風琴是綁定（點擊事件等）。在進行替換之前撕下手風琴可能是獲得預期行爲的最簡單方法。

來源

2012-05-03 19:29:12

感謝您的幫助！ – tzerb

您可以根據包裹在另一個DIV：

<div id="wrapper">  
<div id="theAcc"> 
     <h3><a href="#">1</a></h3> 
     <div>One</div> 
     <h3><a href="#">2</a></h3> 
     <div>Two</div> 
     <h3><a href="#">3</a></h3> 
     <div>Three</div>  
    </div> 
</div> 
<button id="btnReplace">Replace</button>

而且這裏是你的新的jQuery：

$(function() { 
    $("#theAcc").accordion(); 
}); 

$("#btnReplace").click(function() { 
    $("#wrapper").html("<div id='theAcc'><h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div></div>");  $("#theAcc").accordion(); 
});

來源

2012-05-03 19:29:27 Martin

更換手風琴看起來不像手風琴

回答

相關問題