jQueryhide()とshow()関数で最も奇妙な問題が発生しています。
私が取り組んでいるサイト（開発ビルド）はこちら
このページでは、ハイドレートと呼ばれる注目の製品の下に製品が表示されます。この製品にはいくつかのフレーバーオプションがあるので、ユーザーが[カートに追加]ボタンをクリックしたときにデフォルトで非表示になっているレイヤーが表示されるようにします。ここで2つのスクリーンショットを参照してください。
ただし、[カートに追加]ボタンをクリックしても、レイヤーが表示されません。以下の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>
[カートに追加]ボタンが2つあることに注意してください。ここのコードの最後のもの（最初に表示されるもの）だけに「choose_options」クラスがあります。また、オーバーレイ内の[キャンセル]ボタンで、idを渡してjQueryのhide（）関数を実行するclose_layerという関数を呼び出しましたが、これも機能しません。
私は考えられるすべてを試しました。他のJSとCSSを無効にしましたが、それでも機能しません。コンソールにすべてを記録し、アラートを追加しました。非表示のdivに要素の表示スタイルを追加するため、関数を実行していますが、CSSファイルをオーバーライドできないようになっています。
どんな助けでも大歓迎です。