基本信息:
网址: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 & 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>
&#13;
答案 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 & 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>
答案 1 :(得分:1)
我建议你应该使用jquery。
javascript代码就像那样
$(document).ready(function(){
$('.showimagesdiv').on('click',function(){
$('.pre_upload_image_box').toggle();
});
});