如何使用 CSS 或 Javascript 隐藏和显示 DIV

Question

基本信息：

网址：http://roverplusnine.xyz/product/RPN-9999-94-FD/ （这是一个 Wordpress 网站，使用 N-Media WooCommerce 个性化产品元管理器插件"

目标：将“单击此处选择徽标”变成切换按钮以显示和隐藏图像选项。我尝试了几种不同的代码和 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();
        });
});