javascript - Accordion - 在 Ajax 调用之后打开第一个条目

Question

我的网站上的手风琴有点问题。我在日历视图中显示了几个事件，这工作正常。将其配置为在站点加载时打开第一个条目，这也可以正常工作。问题是，我有几个过滤器用于显示这些事件（例如类别、年份、月份...），并使用 AJAX 请求进行调用。在我使用了这些过滤器中的任何一个之后，当我的网站正在加载时，就不可能自动打开手风琴的第一个事件。希望你能理解我的问题，因为我的英语不太好:)

过滤器之一的 HTML：

<div class="col-md-15 col-sm-3">

    <select id="month-event-filter" name="month" disabled>
            <?php if ( !$detect->isMobile() ) { ?>
        <option value=""><?php _e( "Month", "themesdojo" ); ?></option>
            <?php } else { ?>
        <option value=""><?php _e( "Alle Monate", "themesdojo" ); ?></option>
            <?php } ?>
        <option value="1"><?php _e( "January", "themesdojo" ); ?></option>
        <option value="2"><?php _e( "February", "themesdojo" ); ?></option>
        <option value="3"><?php _e( "March", "themesdojo" ); ?></option>
        <option value="4"><?php _e( "April", "themesdojo" ); ?></option>
        <option value="5"><?php _e( "May", "themesdojo" ); ?></option>
        <option value="6"><?php _e( "June", "themesdojo" ); ?></option>
        <option value="7"><?php _e( "July", "themesdojo" ); ?></option>
        <option value="8"><?php _e( "August", "themesdojo" ); ?></option>
        <option value="9"><?php _e( "Setpember", "themesdojo" ); ?></option>
        <option value="10"><?php _e( "October", "themesdojo" ); ?></option>
        <option value="11"><?php _e( "November", "themesdojo" ); ?></option>
        <option value="12"><?php _e( "December", "themesdojo" ); ?></option>

    </select>

我的手风琴的 HTML (PHP)：

if ($start_date_cal_m <> $prevMonth) {
// if a new year we definitely need to close the previous accordion div
// unless it's the first iteration
if ($prevDay) {
    echo '</div><!-- close accordion div 1-->';
}
echo "<h3>$start_date_cal_m_name</h3>\n";
}
if ($start_date_cal_m <> $prevMonth || $start_date_cal_d <> $prevDay) {
// if new month but not new year close accordion
if ($start_date_cal_m == $prevMonth) {
    echo '</div><!-- close accordion div 2-->';
}

echo "<button class=\"accordion\">$start_date_cal_d_name,      $start_date_cal_d.$start_date_cal_m.</button>\n";


echo "<div class=\"panel\">\n";


}

手风琴Javascript：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
        panel.style.maxHeight = null;
    } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
    } 
}
}
acc[0].onclick();

jQuery过滤器：

jQuery(function($) {
jQuery("#location-events").change(function() {
    jQuery('#my_listings_current_page').val("1");
    $.fn.tdSubmitFilter();
}); 

jQuery("#category-events").change(function() {
    jQuery('#my_listings_current_page').val("1");
    $.fn.tdSubmitFilter();
}); 

var val = jQuery("#year-event-filter").val();

if( val === "" ) {
    jQuery("#month-event-filter").attr('disabled', 'disabled');
} else {
    jQuery("#month-event-filter").removeAttr('disabled');
}

jQuery("#year-event-filter").change(function() {
    jQuery('#my_listings_current_page').val("1");
    var val = jQuery(this).val();
    if( val === "" ) {
        jQuery("#month-event-filter").attr('disabled', 'disabled');
        jQuery("#month-event-filter").val("");
        jQuery("#day-event-filter").attr('disabled', 'disabled');
        jQuery("#day-event-filter").val("");
    } else {
        jQuery("#month-event-filter").removeAttr('disabled');
    }
    $.fn.tdSubmitFilter();
});

var val2 = jQuery("#month-event-filter").val();

if( val2 === "" ) {
    jQuery("#day-event-filter").attr('disabled', 'disabled');
    jQuery("#day-event-filter").val("");
} else {
    jQuery("#day-event-filter").removeAttr('disabled');
}

jQuery("#month-event-filter").change(function() {
    jQuery('#my_listings_current_page').val("1");
    var val = jQuery(this).val();
    if( val === "" ) {
        jQuery("#day-event-filter").attr('disabled', 'disabled');
    } else {
        jQuery("#day-event-filter").removeAttr('disabled');
    }
    $.fn.tdSubmitFilter();
});

jQuery("#day-event-filter").change(function() {
    jQuery('#my_listings_current_page').val("1");
    $.fn.tdSubmitFilter();
});

jQuery(document).on("click",".pagination a.page-numbers",function(e){

    var hrefprim = jQuery(this).attr('href');
    var href = hrefprim.replace("#", "");

    jQuery('#my_listings_current_page').val(href);

    $.fn.tdSubmitFilter();

    e.preventDefault();
    return false;

});

$.fn.tdSubmitFilter = function() {

    jQuery("html, body").animate({ scrollTop: 0 }, 800);

    jQuery('#td-filter-events').ajaxSubmit({
        type: "POST",
        data: jQuery('#td-filter-events').serialize(),
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        beforeSend: function() { 
            jQuery(".upcoming-events-holder").fadeOut(200);
            jQuery(".upcoming-events-holder").html("");
            jQuery(".listing-loading").css("display", "inline-block");
        },   
        success: function(response) {
            jQuery(".listing-loading").css("display", "none");
            jQuery(".upcoming-events-holder").html(response);
            jQuery(".upcoming-events-holder").fadeIn(200);  
        }
    });

}

});

标签： javascriptjqueryajaxaccordion