11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

j'ai intégré un menu accordéon jQuery basique (Updated Version ici: http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/) dans la sidebar de mon thème Wordpress.

Le script fonctionne parfaitement sur Firefox, Chrome et Internet Explorer 8. Néanmoins, IE (encore lui!) est le seul à mettre 2-3 secondes à charger ce seul script. Pendant ce temps, le menu déroulant reste ouvert et impossible de scroller/naviguer sur la page. Très gênant pour la navigation. Si vous avez une astuce pour accélérer l'affichage sur IE... merci d'avance.

Le code du script dans Sidebar.php
<div id="wrapper">
		<div class="accordionButton">FILTRER PAR MARQUE</div>
		<div class="accordionContent"><?php echo cp_cat_menu_drop_down(get_option('cp_cat_dir_cols'), get_option('cp_dir_sub_num')); ?></div>
		<div class="accordionButton">FILTRER PAR VENDEUR</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">FILTRER PAR PAYS</div>
		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">RECHERCHE PRECISE</div>
		<div class="accordionContent"><form action="<?php bloginfo('url'); ?>/" method="get" id="searchform" class="form_search2">

            <input name="s" type="text" id="s" class="editbox_search" <?php if(get_search_query()) { echo 'value="'.trim(strip_tags(esc_attr(get_search_query()))).'"'; } else { ?> value="<?php _e('What are you looking for?','appthemes'); ?>" onfocus="if (this.value == '<?php _e('What are you looking for?','appthemes'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('What are you looking for?','appthemes'); ?>';}" <?php } ?> />

                <?php wp_dropdown_categories('show_option_all='.__('All Categories', 'appthemes').'&hierarchical='.get_option('cp_cat_hierarchy').'&hide_empty='.get_option('cp_cat_hide_empty').'&depth='.get_option('cp_search_depth').'&show_count='.get_option('cp_cat_child_count').'&orderby='.get_option('cp_cat_orderby').'&title_li=&use_desc_for_title=1&taxonomy='.APP_TAX_CAT); ?>
            <div class="pad5"></div>
            <div style="margin-left:5px;"><input type="submit" class="btn_orange" value="<?php _e('Lancer la recherche','appthemes')?>" title="Search" id="go" name="sa" />
        </form></div></div>
	</div>


Dans header.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
    <script>
	$(document).ready(function() {
	 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.accordionButton').click(function() {

		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('normal');
		 } 
		  
	 });
	  
	
	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$('.accordionButton').mouseover(function() {
		$(this).addClass('over');
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.accordionContent').hide();

});
</script><?php wp_head(); ?>