我正在开发的网站(开发版本)是here

在页面上,您会看到一个名为Hydrate的特色产品的产品.该产品有一些风味选项,所以我想做的是使它,以便当用户单击添加到购物车按钮,它显示默认隐藏的图层.看到这里的两个屏幕截图：

但是,当我单击添加到购物车按钮时,图层不会出现.下面的Firebug屏幕显示了单击“添加到购物车”按钮后的元素.

请注意,根据jQuery规范,元素样式为“display：block”,然后应该覆盖“display：none”的CSS元素样式.我做了这几百次,如果不是更多,这是第一次没有工作.现在看下面的Firebug截图.如果我在调试控制台中单击显示：none的旁边的红色斜线圈,则图层将按照原样显示.

以下是我认为是相关代码的片段,但是我看不到问题在哪里.

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;
}

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();
    });
});

注意：我以为也许有某种方式干扰,所以我实现了noConflict,但没有任何区别.另请注意,我在Firebug中没有收到任何JS错误.

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>

请注意,有两个添加到购物车按钮.只有代码中最后一个(最初显示的代码)在其上有“choose_options”类.另外,在覆盖层内的“取消”按钮上,我调用了一个名为close_layer的函数,该函数传递id,然后运行不起作用的jQuery hide()函数.

我已经尝试了我能想到的一切.我已经禁用了其他的JS和CSS,但仍然不起作用.我控制台记录了所有内容并添加了警报.它运行该功能,因为它将元素显示样式添加到隐藏的div,但有些东西不让它覆盖CSS文件.

任何帮助将不胜感激.