関数toggle_visibility（id）が正しく動作しません

Question

問題があります。機能はほぼ完璧ですが、このdivボタンをクリックすることでアクティブなdivを閉じることはありません。たとえば、button1をクリックし、button1で別の時間をクリックして閉じたいとします。他の組み合わせもOKです。誰か助けて？ここ

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'; 
 
}

.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; 
 
}

<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>

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 "を開き、" button bg-g "を開くと、これは最初のボタンを閉じることができません。私はすべてのボタンのように動作したい：デフォルトで非表示、表示/非表示（自分）、他をクリックすると別のボタンを隠す。

Answer 3

私は一意のIDを持っています（このサイトでは悪いと書いています）。私のために働かない私は前に言ったようにオプションを隠す。誰ですか？ @JaromandaXが述べたように

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'; 
 
}

.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; 
 
}

<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>