函数toggle_visibility(id)无法正常工作

时间:2016-10-28 00:20:36

标签: javascript

我有问题。功能工作几乎完美,但不要通过单击此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;
&#13;
&#13;

3 个答案:

答案 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(在这个网站上写得不好)。对我来说不起作用只是像我之前说的那样隐藏选项。有人吗?

&#13;
&#13;
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;
&#13;
&#13;