Contenu masqué lors de l'utilisation de jQuery sur IE7

Question

J'utilise jQuery pour basculer entre les panneaux de recherche «simple» et «avancé» en faisant glisser les panneaux vers le haut ou vers le bas. Après la diapositive, je veux définir le focus d'entrée pour le premier champ, mais cela provoque le panneau à vide sur IE7. Cela n'arrive pas sur FF 3.5.1

Le code original utilise ASP.NET mais j'ai réussi à le reproduire avec du HTML et du JavaScript simples ci-dessous. Ma première tentative était basée sur des tables plutôt que sur des divs, mais le même problème s'est produit.

Je pensais que c'était peut-être le bug de peekaboo mais j'ai essayé quelques-unes des corrections suggérées (position: relative, zoom: 1) mais pas de chance. Lorsque la page de démonstration est ouverte, la fonction de recherche simple est affichée. Lorsque vous cliquez sur le bouton 'Avancé', le panneau avancé glisse vers le bas mais est masqué. Si vous redimensionnez la fenêtre, elle s'affiche à nouveau. Suppression de l'appel jquery() à focus() résout le problème.

$(document).ready(function() { 
 

 
    $("#btnSwitchAdvanced").click(function() { 
 
    $("#simpleSearchPanel").slideUp(200, function() { 
 
     $("#advSearchPanel").slideDown(500, function() { 
 
     $("#txtASDescription").focus(); 
 
     }); 
 
    }); 
 
    }); 
 

 
    $("#btnSwitchSimple").click(function() { 
 
    $("#advSearchPanel").slideUp(200, function() { 
 
     $("#simpleSearchPanel").slideDown(500, function() { 
 
     $("#txtSimpleSearch").focus(); 
 
     }); 
 
    }); 
 
    }); 
 

 
    $("#advSearchPanel").hide(); 
 
});

.criteriaRow 
 
{ 
 
    clear:both; 
 
} 
 

 
.criteriaLabel 
 
{ 
 
    float:left; 
 
    width:200px; 
 
}   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="searchPanel" style="background-color: #dcdcdc; margin-top: 5px;"> 
 
    <div id="searchCriteria"> 
 
     <div id="simpleSearchPanel"> 
 
      <span>Simple Search</span> 
 
      <input type="text" id="txtSimpleSearch" /> 
 
      <input type="button" id="btnSwitchAdvanced" value="Switch to Advanced" /> 
 
     </div> 
 
     <div id="advSearchPanel"> 
 
      <span>Advanded Search</span> 
 
      <div> 
 
       <div class="criteriaRow"> 
 
        <div class="criteriaLabel"> 
 
         <span id="lblASDescription">Description:</span> 
 
        </div> 
 
        <div class="criteriaInput"> 
 
         <input type="text" id="txtASDescription" /> 
 
        </div> 
 
       </div> 
 

 
       <div class="criteriaRow"> 
 
        <div class="criteriaLabel"> 
 
         <span id="lblASId">Id:</span> 
 
        </div> 
 
        <div class="criteriaInput"> 
 
         <input name="txtASId" type="text" id="txtASId" /> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div> 
 
       <div id="criteriaActions" style="float:left;"> 
 
        <input type="button" id="btnSwitchSimple" value="Switch To Simple" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Je l'ai travailler dans IE8 après la mise en ligne suivante:

$("#advSearchPanel").slideDown(500, function() { 

à cette ligne:

$("#advSearchPanel").show(function() { 

Answer 2

@canice, j'ai rencontré la même situation/similaire avant, où RIEN ne semble résoudre le problème dans IE7 ou IE6. J'ai fait tous les hacks - zoom, position, z-index, etc., et finalement j'ai fini par ajouter un peu de code pour ces furieux navigateurs.

La plupart des cas, je peux résoudre en utilisant jQuery pour modifier dynamiquement les dimensions de l'élément qui joue peekaboo en ajoutant ou en soustrayant 1 pixel après l'exécution de la fonction d'animation. J'admets que ce n'est pas du tout «parfait», mais cela fait l'affaire et parfois c'est tout ce dont nous avons le temps ou les ressources.

Vous pouvez trouver plus d'informations sur la vérification spécifique au navigateur en utilisant jQuery ici: http://api.jquery.com/jQuery.browser/

Alternativement, en utilisant le code à l'intérieur des blocs tels que les suivants pourraient être utiles aussi:

<!--[if lte IE 6]> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(element).dostuff(); 
}); 
</script> 
<![endif]-->