如何使用CSS或Javascript隱藏和顯示DIV

Question

基本信息：

網址： http : //roverplusnine.xyz/product/RPN-9999-94-FD/ （這是一個使用N-Media WooCommerce個性化產品Meta Manager插件的Wordpress網站”

目標：將“單擊此處選擇徽標”變成一個切換按鈕，以顯示和隱藏圖像選項。 我嘗試了幾種不同的代碼和javascript建議，但無法使其正常工作。

可以提供的任何幫助表示贊賞。

我有以下HTML和CSS標記：

 .showimagesdiv{ cursor: pointer; background-color:#a3000c; width: 175px; text-align: center; padding: 11px; color: #fff; } #pre-uploaded-images-choose_logo label { } .pre_upload_image_box{ border: 1px solid; background: #333; text-align: center; margin-top: 15px; position: absolute; z-index: 999; right: 0; display:none; } .pre_upload_image_box .pre_upload_image{ width: 100px; overflow: hidden; float: left; text-align: center; background-color: #FFF; margin: 5px; position: relative; } 

 <div data-dataname="choose_logo" id="pre-uploaded-images-choose_logo" style="width: 99%; margin-right: 1%;"> <label for="choose_logo"> <div class="showimagesdiv">Click Here To Choose A Logo </div> </label> <br> <div class="pre_upload_image_box"> <div class="pre_upload_image"> <img src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew-150x150.jpg"> <div style="display:none" id="pre_uploaded_image_choose_logo-0"> <img style="margin: 0 auto;display: block;" src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew.jpg"></div> <div class="input_image"> <input data-price="" data-title="2 &amp; A Brew" data-type="image" name="choose_logo" value="{&quot;link&quot;:&quot;http:\\/\\/roverplusnine.xyz\\/wp-content\\/uploads\\/2017\\/07\\/2AndABrew.jpg&quot;,&quot;id&quot;:&quot;5111&quot;,&quot;title&quot;:&quot;2 &amp; A Brew&quot;,&quot;price&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;}" type="radio"><a href="#TB_inline?width=600&amp;height=450&amp;inlineId=pre_uploaded_image_choose_logo-0" class="thickbox" title="2 &amp; A Brew"> <img src="http://roverplusnine.xyz/wp-content/plugins/nm-woocommerce-personalized-product/images/zoom.png" width="15"></a> <div class="p_u_i_name">2 &amp; A Brew </div> </div> 

Answer 1

 .showimagesdiv{ cursor: pointer; background-color:#a3000c; width: 175px; text-align: center; padding: 11px; color: #fff; } #pre-uploaded-images-choose_logo label { } .pre_upload_image_box{ border: 1px solid; background: #333; text-align: center; margin-top: 15px; position: absolute; z-index: 999; right: 0; display:none; } .pre_upload_image_box .pre_upload_image{ width: 100px; overflow: hidden; float: left; text-align: center; background-color: #FFF; margin: 5px; position: relative; } 

 <div data-dataname="choose_logo" id="pre-uploaded-images-choose_logo" style="width: 99%; margin-right: 1%;"> <label for="choose_logo"> <script>var n=0;</script> <div class="showimagesdiv" onclick="n++;if(n==1){dd.style.display='block';}else{n=0;dd.style.display='none';}">Click Here To Choose A Logo </div> </label> <br> <div class="pre_upload_image_box" id="dd"> <div class="pre_upload_image"> <img src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew-150x150.jpg"> <div style="display:none" id="pre_uploaded_image_choose_logo-0"> <img style="margin: 0 auto;display: block;" src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew.jpg"></div> <div class="input_image"> <input data-price="" data-title="2 &amp; A Brew" data-type="image" name="choose_logo" value="{&quot;link&quot;:&quot;http:\\/\\/roverplusnine.xyz\\/wp-content\\/uploads\\/2017\\/07\\/2AndABrew.jpg&quot;,&quot;id&quot;:&quot;5111&quot;,&quot;title&quot;:&quot;2 &amp; A Brew&quot;,&quot;price&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;}" type="radio"><a href="#TB_inline?width=600&amp;height=450&amp;inlineId=pre_uploaded_image_choose_logo-0" class="thickbox" title="2 &amp; A Brew"> <img src="http://roverplusnine.xyz/wp-content/plugins/nm-woocommerce-personalized-product/images/zoom.png" width="15"></a> <div class="p_u_i_name">2 &amp; A Brew </div> </div> 

Answer 2

我建議您為此使用jquery。

和JavaScript代碼將是這樣的

$(document).ready(function(){
       $('.showimagesdiv').on('click',function(){
           $('.pre_upload_image_box').toggle();
        });
});