jQuery afficher/masquer ne fonctionne pas

Je vais avoir le plus étrange problème avec jQuery hide() et show() fonctions.

Le site que je suis en train de travailler sur (version de développement) est ici

Sur la page, vous verrez un produit en vertu de la sélection de Produits appelée Hydrater. Ce produit a une saveur options que je veux faire est de faire en sorte que lorsque l'utilisateur clique sur le bouton Ajouter au Panier, il montre une couche qui est par défaut cachés. Voir les deux captures d'écran ici:

jQuery afficher/masquer ne fonctionne pas

Cependant, lorsque je clique sur le bouton Ajouter au Panier, la couche ne s'affiche pas. Firebug capture d'écran ci-dessous montre ce que les éléments de ressembler après que j'ai cliqué sur le bouton Ajouter Au Panier.
jQuery afficher/masquer ne fonctionne pas

Avis que l'élément style "display: block" comme par le jQuery norme, qui a ensuite devrait remplacer le CSS de l'élément de style "display: none". J'ai fait ça des centaines de fois, si pas plus et c'est la première fois cela n'a pas fonctionné. Maintenant, regardez le Firebug capture d'écran ci-dessous. Si je clique sur la barre oblique rouge-cercle à côté de display:none dans la console de débogage, la couche s'affiche exactement comme il le devrait.
jQuery afficher/masquer ne fonctionne pas

Ci-dessous sont des extraits de ce que je crois, sont code pertinent, mais je ne vois pas où est le problème.

Code CSS:

.carouselProduct {float:left; border:2px solid #e9e9e9; width:223px; min-height:242px; margin:18px 2px 0 2px; position:relative; overflow:hidden;}
.productOptions{
    position:absolute;
    bottom:0px;
    left:0px;
    width:211px;
    background: url('../images/black_background_75.png');
    z-index:99999;
    padding: 6px;
    height:170px;
    display:none;
}

Code JS:

$(document).ready(function(){
    $.noConflict();
    jQuery('.add_to_cart_btn').live('click',function(e){
        e.preventDefault();
        $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'} });
    });
    jQuery('.choose_options').live('click',function(e){
        e.preventDefault();
        jQuery('#options_'+jQuery(this).attr('rel')).show();
    });
});

Note: j'ai pensé que peut-être il y avait un moyen que quelque chose n'interfère donc j'ai mis en place noConflict mais il n'a fait aucune différence. Notez également que je ne reçois pas TOUTES les erreurs JS dans Firebug.

Code HTML:

<article class="carouselProduct"> 
    <!--productContent starts here-->
    <article class="productContent">
        <a href="/shop/product/intensity-hydrate"><img class='productImage' src="/uploaded/thumbnails/db_file_img_33_autox126.png" style="margin: 3px;"></a>
        <hgroup>
            <h4>Hydrate</h4>
           <h3>$25.00</h3>
            <h3 class="orange">$15.00</h3>
        </hgroup>
        <strong>Key Benefits:</strong>
        <ul>
            <li>Proper electrolyte balance</li>
            <li>Reduce muscle fatigue & cramping</li>
        </ul>
        </article>
        <!--productContent ends here--> 
        <!--productOptions layer starts here -->
        <div class="productOptions" id="options_1">
            <div class='selectbox1'>
                <label>Flavor</label>
                <select class='my-dropdown' name='product_options[4448804864d703e8b696c3fa7713aa23]'>
                    <option value='Fruit Punch'>Fruit Punch</option>
                    <option value='Orange'>Orange</option>
                </select>
            </div><br>
            <article class="product_btn">
                <a class="yellow_btn" rel="1" title="Add To Cart" href="#" onclick="return $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'},onSuccess: function(){ close_layer(1) } })">Add To Cart</a>
                <a class="gray_btn" title="View More" href="#" onclick="close_layer(1)">Cancel</a>
            </article>
        </div>
        <!--productOptions layer ends here -->
        <!--product_btn starts here-->
        <article class="product_btn">
            <a class="yellow_btn choose_options" title="Add To Cart" href="#" rel="1">Add To Cart</a>
            <a class="gray_btn" title="View More" href="/shop/product/intensity-hydrate">View More</a>
        </article>
    <!--product_btn ends here--> 
</article>

Remarque qu'il y a deux Ajouter Au Panier boutons. Seul le dernier dans le code ici (celui qui s'affiche au début), a la "choose_options" de la classe. Aussi, sur le bouton Annuler à l'intérieur de la superposition, j'ai appeler une fonction appelée close_layer qui passe l'id, puis exécute l'jQuery hide() fonction qui ne fonctionne pas.

J'ai essayé tout ce que je peux penser. J'ai désactivé les autres CSS et JS et encore il ne fonctionne pas. J'ai la console connecté tout et ajouté des alertes. Il EST en cours d'exécution de la fonction, car cela ajoute à l'affichage des éléments de style de la div caché mais quelque chose n'est pas la laisser remplacer le fichier CSS.

Toute aide serait grandement appréciée.

Avez-vous l'expérience des résultats similaires dans d'autres navigateurs, ie Chrome?
Où est le style="display:block" ajoutés? Puisque vous avez mentionné que vous avez désactivé le JS et ne fonctionne toujours pas, il pourrait très probablement être mis sur le côté serveur. Qui doit être enlevé pour permettre de CSS pour faire sa chose.
Anthony - oui même problème sur tous les navigateurs que j'ai essayé. Chrome, Safari et Firefox.
Lanthe - "display:block" est ajouté dynamiquement par jQuery en cliquant sur le bouton Ajouter au Panier.

OriginalL'auteur Andrew Christensen | 2013-01-15