我希望有人能夠幫助我解決與將內容加載到jQuery手風琴onclick有關的問題。目前手風琴功能正在運行,內容正在由AJAX加載,問題是我只想在用戶點擊特定的手風琴葉時加載內容,而不是在加載頁面時加載所有內容。加載頁面內容Onclick - AJAX
HTML:
<div class="accordionButton">Origin</div>
<div class="accordionContent">
<a href="javascript:void(0)" class="close">Close</a>
<div id="success_origin"></div>
<div id="error_origin"></div>
<script>
$("#success_origin").load("content_origin.html", function(response, status, xhr) {
if (status == "error_origin") {
var msg = "Sorry but there was an error when loading the page's content: ";
$("#error_origin").html(msg + xhr.status + " " + xhr.statusText);
}
});
</script>
</div>
<div class="accordionButton">Style</div>
<div class="accordionContent">
<a href="javascript:void(0)" class="close">Close</a>
<div id="success_style"></div>
<div id="error_style"></div>
<script>
$("#success_style").load("content_style.html", function(response, status, xhr) {
if (status == "error_style") {
var msg = "Sorry but there was an error when loading the page's content: ";
$("#error_style").html(msg + xhr.status + " " + xhr.statusText);
}
});
</script>
</div>
等等......
手風琴的JavaScript:
$(document).ready(function() {
$('.close').click(function() {
$('.close').addClass('hide');
$('.accordionContent').slideUp('normal');
$('.accordionButton').addClass('on');
$('.accordionButton').removeClass('off');
$('.showHeadline').slideDown('normal');
});
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionButton').addClass('off');
$('.showHeadline').slideUp('normal');
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
$('.close').addClass('show');
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.accordionButton').mouseover(function() {
$(this).addClass('over');
}).mouseout(function() {
$(this).removeClass('over');
});
$('.accordionContent').hide();
});
我敢肯定這件事情簡單,但我倒是很欣賞任何幫助。
感謝, @rrfive