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

时间:2017-07-11 21:26:24

标签: javascript html css wordpress

基本信息:

网址:http://roverplusnine.xyz/product/RPN-9999-94-FD/ (这是一个Wordpress网站使用 N-Media WooCommerce个性化产品Meta Manager插件"

目标:转动"点击此处选择徽标"进入切换按钮以显示和隐藏图像选项。我尝试了几种不同的代码和javascript建议,但我还没有能够让它工作。

任何可以提供的帮助表示赞赏。

我有以下HTML& CSS Mark-up:



.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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:3)

.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>

答案 1 :(得分:1)

我建议你应该使用jquery。

javascript代码就像那样

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