Question

我有问题。功能工作几乎完美，但不要通过单击此div按钮关闭活动div。例如，我单击button1，我想通过在button1中单击另一个时间来关闭它。其他组合工作正常。有人帮忙吗？

＆＃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;

Answer 1

你在这里

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>

Answer 2

谢谢你的帮助，但是这个修改工作也有点错误，因为当我打开按钮“按钮bg-r”然后打开“按钮bg-g”这不要关闭第一个按钮。我想对每个按钮都这样工作：默认隐藏，显示/隐藏（他自己），当我点击其他按钮时隐藏另一个按钮。

Answer 3

对不起刚检查我有唯一的ID（在这个网站上写得不好）。对我来说不起作用只是像我之前说的那样隐藏选项。有人吗？

＆＃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;

函数toggle_visibility（id）无法正常工作

3 个答案: