【发布时间】：2012-12-29 01:47:28
【问题描述】：
我在使用 jQuery 的 hide() 和 show() 函数时遇到了最奇怪的问题。
我正在开发的网站（开发版本）是here
在页面上，您会在特色产品下看到一个名为 Hydrate 的产品。这个产品有一些风味选项，所以我想做的是，当用户单击“添加到购物车”按钮时，它会显示默认隐藏的图层。在此处查看两个屏幕截图：
但是，当我单击“添加到购物车”按钮时，该图层没有出现。下面的 Firebug 屏幕截图显示了我单击“添加到购物车”按钮后元素的外观。
请注意，根据 jQuery 规范，元素样式为“display: block”，然后 应该 覆盖 CSS 元素样式为“display: none”。我已经这样做了数百次，如果不是更多的话，这是第一次没有奏效。现在看看下面的 Firebug 屏幕截图。如果我在调试控制台中单击 display:none 旁边的红色斜线圆圈，则该图层将完全按照应有的方式显示。
以下是我认为相关代码的 sn-ps，但我看不出问题出在哪里。
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 文件。
任何帮助将不胜感激。
【问题讨论】：
-
您是否在其他浏览器（即Chrome）中也遇到过类似的结果？
-
在哪里添加
style="display:block"？既然你提到你已经禁用了 JS 并且仍然没有工作，它很可能是在服务器端设置的。需要删除它以允许 CSS 完成它的工作。 -
Anthony - 在我尝试过的所有浏览器上都是同样的问题。 Chrome、Safari 和 Firefox。
-
Lanthe - 点击“添加到购物车”按钮后，jQuery 会动态添加“display:block”。
标签： javascript jquery html css