我遇到了 jQueryhide()和show()函数最奇怪的问题。
我正在处理的网站（开发版本）在这里
在页面上，您将在特色产品下看到一个名为 Hydrate 的产品。这个产品有一些风味选项，所以我想做的是，当用户单击“添加到购物车”按钮时，它会显示默认隐藏的图层。请参阅此处的两个屏幕截图：
但是，当我单击“添加到购物车”按钮时，该图层不会出现。下面的 Firebug 屏幕截图显示了我单击“添加到购物车”按钮后元素的外观。
请注意，根据 jQuery 规范，元素样式是“display: block”，然后应该覆盖“display: none”的 CSS 元素样式。我已经这样做了数百次，如果不是更多的话，这是第一次没有奏效。现在看看下面的 Firebug 屏幕截图。如果我在调试控制台中单击 display: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 文件。
任何帮助将不胜感激。