Код кнопки Javascript только частично работает

Question

Удивление, если кто-нибудь скажет мне, что я пропускаю. Я написал следующий код javascript, который управляет 9 кнопками меню. Когда вы нажимаете на каждую из 9 кнопок, кнопки подменю отображаются под выбранной вами кнопкой. Когда вы нажимаете другую кнопку главного меню, появляются предыдущие кнопки подменю (исчезают) и появляются новые кнопки подменю. В основном это меню в стиле аккордеона.

Все, кажется, отлично работает, за исключением того, что я заметил, что будут отображаться только 2 кнопки подменю, независимо от того, что я пробую. Не уверен, почему он не отобразит все меню.

ПРИМЕЧАНИЕ: Я знаю, что это может быть сделано проще с jquery, но я хотел экспериментировать и практиковать свой javascript, я немного ржавый.

Код:

function SubMenu(Sub_Class_Name) { 
var Z = document.getElementsByClassName(Sub_Class_Name); 
var A = document.getElementsByClassName('tips_button0'); 
var B = document.getElementsByClassName('tips_button1'); 
var C = document.getElementsByClassName('tips_button2'); 
var D = document.getElementsByClassName('tips_button3'); 
var E = document.getElementsByClassName('tips_button4'); 
var F = document.getElementsByClassName('tips_button5'); 
var G = document.getElementsByClassName('tips_button6'); 
var H = document.getElementsByClassName('tips_button7'); 
var I = document.getElementsByClassName('tips_button8'); 
var X ; 
    for (X=0; X < Z.length; X++) { 
if (A.item(X).style.display == 'block') { 
    A.item(X).style.display = 'none'; 
} 
if (B.item(X).style.display == 'block') { 
    B.item(X).style.display = 'none'; 
} 
if (C.item(X).style.display == 'block') { 
    C.item(X).style.display = 'none'; 
} 
if (D.item(X).style.display == 'block') { 
    D.item(X).style.display = 'none'; 
} 
if (E.item(X).style.display == 'block') { 
    E.item(X).style.display = 'none'; 
} 
if (F.item(X).style.display == 'block') { 
    F.item(X).style.display = 'none'; 
} 
if (G.item(X).style.display == 'block') { 
    G.item(X).style.display = 'none'; 
} 
if (H.item(X).style.display == 'block') { 
    H.item(X).style.display = 'none'; 
} 
if (I.item(X).style.display == 'block') { 
    I.item(X).style.display = 'none'; 
} 

    Z.item(X).style.display = "block"; 
} 

}

EDIT: Не знаю, почему его не позволяя мне размещать весь HTML-код, но вот ссылка на тестовый сайт с информацией. http://plentyoftales.com/vegas/Pages/testing.html

Answer 1

Eureka !!

Ok, для тех, кто следит вдоль дома или для тех, кто наткнуться на это в будущем ищет решение (и я подчеркиваю «решение», потому что нет никаких сомнений в другой способ или два для достижения этой цели), вот проблема и решение. Я сделаю все возможное, чтобы быть коротким и понятным.

В моем первоначальном коде я старался, чтобы функция была простой, делая все в одной функции. При этом я наткнулся на проблему с циклом for функции, цепляющейся за класс с наименьшим количеством элементов массива.

В моем случае это я использовал 9 основных кнопок, у которых было несколько кнопок «под» под каждой «основной» кнопкой. Каждый суб-кнопочный коллектив под основной кнопкой имел свой уникальный CSS-класс, который я пытался настроить стиль отображения (от ни одного к блоку или наоборот). (кнопки fyi могут легко быть div или другим элементом).

Так что, если бы у меня было несколько основных секций кнопок с 6 суб-кнопками, другое с тремя дополнительными кнопками, одно с 5 суб-кнопками, а другое с 4-ю кнопками .... цикл for остановился бы на 3 циклах, таким образом, никогда не будет отображаться никаких кнопок, превышающих 3. Даже если вы сказали, что цикл будет работать до 1000, он никогда не пройдет 3.

Я точно не знаю, почему это так, я просто понял, что цикл for остановился на наименьшее количество предметов класса. BTW, если бы у меня было такое же количество суб-кнопок во всех разделах, тогда это бежало без проблем.

Таким образом, решение заключается в создании функции со своим собственным циклом для каждого класса суб-кнопок. И еще один для открытия текущей кнопки кнопки. Затем, чтобы упростить вызов функций, я создал одну функцию, которая вызвала все остальные. Не так упрощенно, как я изначально хотел или думал, но все же проще, чем называть все идентификационные номера элементов и делать это именно так.

Что еще более важно, это работает.

Вот пересмотренная Javascript код:

function closeALL (Sub_Class_Name) { 
close0(); 
close1(); 
close2(); 
close3(); 
close4(); 
close5(); 
close6(); 
close7(); 
close8(); 
SubMenu(Sub_Class_Name); 
} 
function close0() { 
var A = document.getElementsByClassName('tips_button0'); 
var length = A.length; 
var X 
    for (X=0; X < length; X++) { 
     A[X].style.display = 'none'; 
    } 
} 
function close1() { 
var B = document.getElementsByClassName('tips_button1'); 
var length = B.length; 
var X 
    for (X=0; X < length; X++) { 
     B[X].style.display = 'none'; 
    } 
} 
function close2() { 
var C = document.getElementsByClassName('tips_button2'); 
var length = C.length; 
var X 
    for (X=0; X < length; X++) { 
     C[X].style.display = 'none'; 
    } 
} 
function close3() { 
var D = document.getElementsByClassName('tips_button3'); 
var length = D.length; 
var X 
    for (X=0; X < length; X++) { 
     D[X].style.display = 'none'; 
    } 
} 
function close4() { 
var E = document.getElementsByClassName('tips_button4'); 
var length = E.length; 
var X 
    for (X=0; X < length; X++) { 
     E[X].style.display = 'none'; 
    } 
} 
function close5() { 
var F = document.getElementsByClassName('tips_button5'); 
var length = F.length; 
var X 
    for (X=0; X < length; X++) { 
     F[X].style.display = 'none'; 
    } 
} 
function close6() { 
var G = document.getElementsByClassName('tips_button6'); 
var length = G.length; 
var X 
    for (X=0; X < length; X++) { 
     G[X].style.display = 'none'; 
    } 
} 
function close7() { 
var H = document.getElementsByClassName('tips_button7'); 
var length = H.length; 
var X 
    for (X=0; X < length; X++) { 
     H[X].style.display = 'none'; 
    } 
} 
function close8() { 
var I = document.getElementsByClassName('tips_button8'); 
var length = I.length; 
var X 
    for (X=0; X < length; X++) { 
     I[X].style.display = 'none'; 
    } 
} 

function SubMenu(Sub_Class_Name) { 
var Z = document.getElementsByClassName(Sub_Class_Name); 
var X ; 
    for (X=0; X < Z.length; X++) { 
    Z[X].style.display = "block" 
} 

} 

Вот пересмотренный HTML код:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 

<style type='text/css'> 
.tips_buttonholder { 
    padding: 20px; 
    float: left; 
    height: 500px; 
    width: 135px; 
    margin-right: 20px; 
    background-color: #FFF; 
    border-radius: 15px; 
} 
.tips_buttons { 
    float: left; 
    width: 135px; 
    margin-bottom: 10px; 
} 

.tips_button0 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button1 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button2 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button3 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button4 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button5 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button6 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button7 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
.tips_button8 { 
    float: left; 
    width: 115px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
    display: none; 
} 
</style> 

<script> 

function closeALL (Sub_Class_Name) { 
    close0(); 
    close1(); 
    close2(); 
    close3(); 
    close4(); 
    close5(); 
    close6(); 
    close7(); 
    close8(); 
    SubMenu(Sub_Class_Name); 
} 

function close0() { 
    var A = document.getElementsByClassName('tips_button0'); 
    var length = A.length; 
    var X 
     for (X=0; X < length; X++) { 
      A[X].style.display = 'none'; 
     } 
} 
function close1() { 
    var B = document.getElementsByClassName('tips_button1'); 
    var length = B.length; 
    var X 
     for (X=0; X < length; X++) { 
      B[X].style.display = 'none'; 
     } 
} 
function close2() { 
    var C = document.getElementsByClassName('tips_button2'); 
    var length = C.length; 
    var X 
     for (X=0; X < length; X++) { 
      C[X].style.display = 'none'; 
     } 
} 
function close3() { 
    var D = document.getElementsByClassName('tips_button3'); 
    var length = D.length; 
    var X 
     for (X=0; X < length; X++) { 
      D[X].style.display = 'none'; 
     } 
} 
function close4() { 
    var E = document.getElementsByClassName('tips_button4'); 
    var length = E.length; 
    var X 
     for (X=0; X < length; X++) { 
      E[X].style.display = 'none'; 
     } 
} 
function close5() { 
    var F = document.getElementsByClassName('tips_button5'); 
    var length = F.length; 
    var X 
     for (X=0; X < length; X++) { 
      F[X].style.display = 'none'; 
     } 
} 
function close6() { 
    var G = document.getElementsByClassName('tips_button6'); 
    var length = G.length; 
    var X 
     for (X=0; X < length; X++) { 
      G[X].style.display = 'none'; 
     } 
} 
function close7() { 
    var H = document.getElementsByClassName('tips_button7'); 
    var length = H.length; 
    var X 
     for (X=0; X < length; X++) { 
      H[X].style.display = 'none'; 
     } 
} 
function close8() { 
    var I = document.getElementsByClassName('tips_button8'); 
    var length = I.length; 
    var X 
     for (X=0; X < length; X++) { 
      I[X].style.display = 'none'; 
     } 
} 

function SubMenu(Sub_Class_Name) { 
    var Z = document.getElementsByClassName(Sub_Class_Name); 
    var X ; 
     for (X=0; X < Z.length; X++) { 
     Z[X].style.display = "block" 
    } 

} 
</script> 
</head> 

<body> 
<div class="tips_buttonholder"> 
<!-- SECTION 4 START --> 
    <button id="main4" class="tips_buttons" type="button" onClick="closeALL('tips_button4'); ">HEALTH</button> 

     <button class="tips_button4" type="button" onClick="">SubButton</button> 
     <button class="tips_button4" type="button" onClick="">SubButton</button> 
     <button class="tips_button4" type="button" onClick="">SubButton</button> 
<!-- SECTION 4 END --> 
<!-- SECTION 5 START --> 
    <button id="main5" class="tips_buttons" type="button" onClick="closeALL('tips_button5'); ">FOOD</button> 

     <button class="tips_button5" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button5" type="button" onClick="">Buffets</button> 
     <button class="tips_button5" type="button" onClick="">SubButton</button> 
<!-- SECTION 5 END --> 
<!-- SECTION 0 START --> 
    <button id="main0" class="tips_buttons" type="button" onClick="closeALL('tips_button0'); ">COMFORT</button> 

     <button class="tips_button0" type="button" onClick="">SubButton</button> 
     <button class="tips_button0" type="button" onClick="">SubButton</button> 
<!-- SECTION 0 END -->  
<!-- SECTION 1 START --> 
    <button id="main1" class="tips_buttons" type="button" onClick="closeALL('tips_button1'); ">MONEY</button> 

     <button class="tips_button1" type="button" onClick="">Airport Rides</button> 
     <button class="tips_button1" type="button" onClick="">Email Clubs</button> 
     <button class="tips_button1" type="button" onClick="">Haggle</button>  

<!-- SECTION 1 END -->  
<!-- SECTION 2 START --> 
    <button id="main2" class="tips_buttons" type="button" onClick="closeALL('tips_button2'); ">TOURNAMENT</button> 

     <button class="tips_button2" type="button" onClick="">SubButton</button> 
     <button class="tips_button2" type="button" onClick="">SubButton</button> 

<!-- SECTION 2 END --> 
<!-- SECTION 3 START --> 
    <button id="main3" class="tips_buttons" type="button" onClick="closeALL('tips_button3'); ">GAMBLING</button> 

     <button class="tips_button3" type="button" onClick="">SubButton</button> 
     <button class="tips_button3" type="button" onClick="">SubButton</button> 
     <button class="tips_button3" type="button" onClick="">SubButton</button> 
<!-- SECTION 3 END --> 
<!-- SECTION 6 START --> 
    <button id="main6" class="tips_buttons" type="button" onClick="closeALL('tips_button6'); ">SITE SEEING</button> 

     <button class="tips_button6" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button6" type="button" onClick="">Power Pass</button> 
     <button class="tips_button6" type="button" onClick="">SubButton</button> 
<!-- SECTION 6 END --> 
<!-- SECTION 7 START --> 
    <button id="main7" class="tips_buttons" type="button" onClick="closeALL('tips_button7'); ">SHOPPING</button> 

     <button class="tips_button7" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button7" type="button" onClick="">SubButton</button> 
     <button class="tips_button7" type="button" onClick="">SubButton</button> 
<!-- SECTION 7 END --> 
<!-- SECTION 8 START --> 
    <button id="main8" class="tips_buttons" type="button" onClick="closeALL('tips_button8'); ">ENTERTAINMENT</button> 
    <button class="tips_button8" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button8" type="button" onClick="">Power Pass</button> 
     <button class="tips_button8" type="button" onClick="">SubButton</button> 
    <button class="tips_button8" type="button" onClick="">Discount Apps</button> 
     <button class="tips_button8" type="button" onClick="">Power Pass</button> 
     <button class="tips_button8" type="button" onClick="">SubButton</button> 
<!-- SECTION 8 END --> 
    </div> 
</body> 
</html>