有人可以帮我解决我的代码

Question

我有这样的代码浮动旗帜并排底侧左和右，没有什么是happend当我点击左边的旗帜，但是当我点击右边的旗帜，左侧的横幅会自动关闭，当我再次点击右侧的横幅时，它会将您引导至其他网站，但横幅会消失。

我的问题是：

1. 如何让正确的左侧和右侧工作，左旗可以单击并直接向目标网站，当我点击右旗不关闭左旗

2. 旗帜后点击旗帜犯规自动关闭

这是代码，我有我的网站上：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#bottomads").click(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
    $("#bottomads2").click(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 

<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads"> 
<a href="http://example.com" target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
<a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0"></a> 
</div> 

<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;left: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2"> 
<a href="http://example.com" target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
<a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0"></a> 
</div> 

我希望我能解释得很好，谢谢你所有的答案。

Answer 1

1. 你bottomads2已经覆盖在bottomads
2. 原因同上

建议你问你的下一个问题之前做更多的试验https://jsfiddle.net。

Answer 2

您的问题显示在这张图片。 bottomads2的div在bottomads上。

，要解决这个问题是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script> 
$(document).ready(function() { 

    $("#bottomads").click(function() { 
     $(this).hide(); 
     $("#bottomads").style('width', '100%'); 
    }); 

    $("#bottomads2").click(function() { 
     $(this).hide(); 
    }); 

}); 
</script> 

<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads"> 
    <a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
    <a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0"></a> 
</div> 
<div style='text-align:center;display:scroll;position:fixed;bottom:5px;left: 700px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2"> 
    <a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
    <a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: fixed;middle: 20px;top: 0;" border="0"></a> 
</div> 

也尽量代码简洁。你会发现很多关于如何编写干净的代码的博客。即尽量让同为类型的样式类：

.bottomads{ 
     text-align:center; 
     display:scroll; 
     position:fixed; 
     bottom:5px; 
     z-index:999; 
     -webkit-transform:translateZ(0); 
    } 

那么该行会是这样：

<div style='width:100%;margin:auto;right: 270px;' id="bottomads" class="bottomads">