我有问题。功能工作几乎完美,但不要通过单击此div按钮关闭活动div。例如,我单击button1,我想通过在button1中单击另一个时间来关闭它。其他组合工作正常。有人帮忙吗?
function toggle_visibility(id) {
var e = document.getElementById(id);
var myClasses = document.querySelectorAll('.party1'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
&#13;
.button1 {
display: inline-block;
height: 40px;
width: 100px;
background: #c1a35f;
text-align: center;
padding: 5px;
font: 15px Kurale;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
.button2 {
display: inline-block;
height: 40px;
width: 100px;
background: #c1a35f;
text-align: center;
padding: 5px;
font: 15px Kurale;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
.button3 {
display: inline-block;
height: 40px;
width: 100px;
background: #c1a35f;
text-align: center;
padding: 5px;
font: 15px Kurale;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
.party1 {
display: none;
}
&#13;
<p class="button1" onclick="toggle_visibility('1')">Show/hide1</p>
<p class="button2" onclick="toggle_visibility('2')">Show/hide2</p>
<p class="button3" onclick="toggle_visibility('3')">Show/hide3</p>
<div class="party1" id="1">some text 1</div>
<div class="party1" id="2">some text 2</div>
<div class="party1" id="3">some text 3</div>
&#13;
答案 0 :(得分:0)
你在这里
function toggle_visibility(id) {
var e = document.getElementById(id);
var myClasses = document.querySelectorAll('.party1'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block'
}
.button {
display: inline-block;
height: 40px;
width: 100px;
background: #c1a35f;
text-align: center;
padding: 5px;
font: 15px Kurale;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
cursor: pointer;
}
.box {
display: none;
}
.bg-r {
background-color: #c44;
}
.bg-g {
background-color: #4c4;
}
.bg-b {
background-color: #44c;
}
<p class="button bg-r" onclick="toggle_visibility(1)">Show/hide1</p>
<p class="button bg-g" onclick="toggle_visibility(2)">Show/hide2</p>
<p class="button bg-b" onclick="toggle_visibility(3)">Show/hide3</p>
<div class="box bg-r" id="1">some text 1</div>
<div class="box bg-g" id="2">some text 2</div>
<div class="box bg-b" id="3">some text 3</div>
答案 1 :(得分:0)
谢谢你的帮助,但是这个修改工作也有点错误,因为当我打开按钮“按钮bg-r”然后打开“按钮bg-g”这不要关闭第一个按钮。我想对每个按钮都这样工作:默认隐藏,显示/隐藏(他自己),当我点击其他按钮时隐藏另一个按钮。
答案 2 :(得分:0)
对不起刚检查我有唯一的ID(在这个网站上写得不好)。对我来说不起作用只是像我之前说的那样隐藏选项。有人吗?
function toggle_visibility(id) {
var e = document.getElementById(id);
var myClasses = document.querySelectorAll('.party1'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
&#13;
.button1 {
display: inline-block;
height: 40px;
width: 100px;
background: #c1a35f;
text-align: center;
padding: 5px;
font: 15px Kurale;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
.button2 {
display: inline-block;
height: 40px;
width: 100px;
background: #c1a35f;
text-align: center;
padding: 5px;
font: 15px Kurale;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
.button3 {
display: inline-block;
height: 40px;
width: 100px;
background: #c1a35f;
text-align: center;
padding: 5px;
font: 15px Kurale;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
.party1 {
display: none;
}
&#13;
<p class="button1" onclick="toggle_visibility('1')">Show/hide1</p>
<p class="button2" onclick="toggle_visibility('2')">Show/hide2</p>
<p class="button3" onclick="toggle_visibility('3')">Show/hide3</p>
<div class="party1" id="1">some text 1</div>
<div class="party1" id="2">some text 2</div>
<div class="party1" id="3">some text 3</div>
&#13;