如何將jQueryUI手風琴與自定義標題和內容div一起使用？

我有一些div想要像手風琴一樣動畫，對此，最合理的做法是jQuieryUI accordion。但由於我不想使用通常的<h3>標籤作爲標題，我使用custom headers as described here。我現在的代碼如下：如何將jQueryUI手風琴與自定義標題和內容div一起使用？

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(function(){ 
     $("#ticket-event-list").accordion({ 
      header: 'event' 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="ticket-event-list"> 
     <div class="event" id="event1">First event</div> 
     <div class="content">The content</div> 
     <div class="event" id="event2">Second event</div> 
     <div class="content">The other content</div> 
    </div> 
</body> 
</html>

然而，這並沒有做任何事情。由於我認爲我只是按照說明進行操作，而且在控制檯中沒有任何錯誤，所以我不知道我在這裏做錯了什麼。

有沒有人知道我能如何讓這個工作？歡迎所有提示！

來源

2014-11-05 kramer65

也許嘗試使用CSS轉換除了運行在JavaScript中有什麼不正常的字體大小的CSS？還是動畫？ – 2014-11-05 20:09:19

您缺少類別選擇器的.。

$(document).ready(function() { 
 
    $(function() { 
 
    $("#ticket-event-list").accordion({ 
 
     header: '.event' 
 
     //-------^ here 
 
    }); 
 
    }); 
 
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="ticket-event-list"> 
 
    <div class="event" id="event1">First event</div> 
 
    <div class="content">The content</div> 
 
    <div class="event" id="event2">Second event</div> 
 
    <div class="content">The other content</div> 
 
</div>

來源

2014-11-05 20:09:17

如何將jQueryUI手風琴與自定義標題和內容div一起使用？

回答

相關問題