我在使用jQuery的
我正在开发一个网站，它可以在这里找到。
在页面上，您会看到Featured Products下面有一个名为Hydrate的产品。该产品有一些口味选项，因此我想当用户单击“添加到购物车”按钮时，它会显示一个默认隐藏的层。请参见此处的两个屏幕截图：
请注意，元素样式为“display:block”，符合jQuery规范，然后应该覆盖“display:none”的CSS元素样式。我已经做了这个操作数百次，如果不是更多，这是第一次它没有起作用。现在看看下面的Firebug截图。如果我在调试控制台中单击显示：none旁边的红色斜杠圆圈，则该层将按预期显示。
以下是我认为相关代码片段，但我无法看到问题所在。
CSS代码:
注意：我认为可能有某种方式在干扰，因此我实施了noConflict，但没有任何区别。还要注意的是，在Firebug中我没有收到任何JS错误。
HTML代码：
请注意，有两个“添加到购物车”按钮。 仅此处代码中的最后一个按钮（最初显示的按钮）具有“choose_options”类。 此外，在覆盖层内部的取消按钮上，我调用了一个名为close_layer的函数，该函数传递了id，然后运行jQuery hide（）函数，但这也不起作用。
我已经尝试了我能想到的一切。 我已禁用其他JS和CSS，但仍然不起作用。 我已记录了所有内容并添加了警报。 它确实运行该函数，因为它将元素显示样式添加到隐藏的div中，但某些东西不允许它覆盖CSS文件。
非常感谢您的帮助。
hide()和show()函数时遇到了奇怪的问题。我正在开发一个网站，它可以在这里找到。
在页面上，您会看到Featured Products下面有一个名为Hydrate的产品。该产品有一些口味选项，因此我想当用户单击“添加到购物车”按钮时，它会显示一个默认隐藏的层。请参见此处的两个屏幕截图：
请注意，元素样式为“display:block”，符合jQuery规范，然后应该覆盖“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文件。
非常感谢您的帮助。
style="display:block"添加在哪里了？由于您提到已禁用 JS 但仍未生效，很可能是在服务器端设置的。需要将其删除以允许 CSS 正常工作。 - Ianthe the Duke of Nukem