我的网站上手风琴有一点问题。我正在日历视图中显示几个事件,效果很好。将其配置为在网站加载时打开第一个条目,这也可以正常工作。问题是,我有几个过滤器用于显示这些事件(例如类别,年,月...),并使用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);
}
});
}
});