基本信息:
网址:http://roverplusnine.xyz/product/RPN-9999-94-FD/ (这是一个使用 N-Media WooCommerce 个性化产品元管理器插件”
目标:将“单击此处选择 Logo ”变成一个切换按钮以显示和隐藏图像选项。我已经尝试了几种不同的代码和 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 & A Brew" data-type="image" name="choose_logo" value="{"link":"http:\/\/roverplusnine.xyz\/wp-content\/uploads\/2017\/07\/2AndABrew.jpg","id":"5111","title":"2 & A Brew","price":"","url":""}" type="radio"><a href="#TB_inline?width=600&height=450&inlineId=pre_uploaded_image_choose_logo-0" class="thickbox" title="2 & 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 & A Brew
</div>
</div>
最佳答案
.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 & A Brew" data-type="image" name="choose_logo" value="{"link":"http:\/\/roverplusnine.xyz\/wp-content\/uploads\/2017\/07\/2AndABrew.jpg","id":"5111","title":"2 & A Brew","price":"","url":""}" type="radio"><a href="#TB_inline?width=600&height=450&inlineId=pre_uploaded_image_choose_logo-0" class="thickbox" title="2 & 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 & A Brew
</div>
</div>
关于javascript - 如何使用 CSS 或 Javascript 隐藏和显示 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45044742/