是否可以一次根据这个实际的div进行制作,也就是说两个事件onclick都无法打开,但是如果一个打开而另一个被点击则第一个自动关闭。顺便说一句,使用此代码的上下文不允许使用Jquery。谢谢你的帮助
<style type="text/css">
.link{text-decoration:none; color:white;}
.link:visited{color:white}
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
div {font-family:'Varela Round';
}
.opener {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border: 1px white solid;
}
.benefits {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:300px;
}
</style>
<style type="text/css">}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
#upbutton {
border: 1px dotted white;
}
</style>
<script>function show(id) {
if(document.getElementById('b'+id).style.display=='none') {
document.getElementById('b'+id).style.display='block';
}
return false;
}
function hide(id) {
if(document.getElementById('b'+id).style.display=='block') {
document.getElementById('b'+id).style.display='none';
}
return false;
}
</script>
<div class="row">
<div class="opener col"><a href="#1" name="1" onclick=" show('1');" class="link">SOCIETES: 400</a>
<div class="benefits" id="b1" style="display:none;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');" >fermer</a></div>
</div>
</div>
<div class="opener col"><a href="#1" name="1" onclick=" show('2');" class="link" >CONTACTS: 25 400</a>
<div class="benefits col" id="b2" style="display:none;">Part CAC 40 : 15 700<br />
Part Filiales +100M€: 9 700<br />
% contacts IT: 21%
<div id="upbutton"><a onclick=" hide('2');">fermer</a></div>
</div>
</div>
<div class="opener col">EMAILS NOMINATIFS: 400</div>
<div class="opener col">OPT OUT: 3%</div>
<div class="opener col">LIGNES DIRECTES: 35%</div></div>
&#13;
答案 0 :(得分:1)
您可以循环浏览其他元素并先在“show”功能中关闭它们
function show(id) {
var benefits = document.getElementsByClassName("benefits");
for(var i = 0; i<benefits.length; i++){
benefits[i].style.display="none";
}
if(document.getElementById('b'+id).style.display=='none') {
document.getElementById('b'+id).style.display='block';
}
return false;
}
答案 1 :(得分:0)
function show(id) {
var v = parseInt(id);
var list = document.getElementsByClassName("benefits");
//var num = list.length;
if(document.getElementById('b'+id).style.display=='none') {
document.getElementById('b'+id).style.display='block';
}
for (i = v+1; i <= list.length ; i++) {
if(document.getElementById('b'+i).style.display=='block') {
document.getElementById('b'+i).style.display='none';
}
}
for (i = v-1; i >=0 ; i--) {
if(document.getElementById('b'+i).style.display=='block') {
document.getElementById('b'+i).style.display='none';
}
}
return false;
}