JavaScript代碼不能正常工作，無法隱藏/顯示div內容

新增功能堆棧溢出和JavaScript作爲一個整體。JavaScript代碼不能正常工作，無法隱藏/顯示div內容

我一直在試圖做一個簡單的函數，改變點擊從「無」到「塊」幾個div元素的內聯顯示屬性。在這裏嘗試了類似問題的不同代碼，但沒有任何運氣。這是代碼。很抱歉，如果我沒有格式化正確:(

代碼：

function toggleMenuItem(subGroupId) { 
 
    subGroupIdStyle = document.getElementById('subGroupId').style; 
 

 
    var see = subGroupIdStyle.display; 
 
    if (see == 'none') { 
 
    see = 'block'; 
 
    } else { 
 
    see = 'none'; 
 
    } 
 
};

<div id="content"> 
 
    <p id="title">Computer <br>components</p> 
 
    <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> 
 
    <div id="subgroup1" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a> 
 
    </div> 
 

 
    <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> 
 
    <div id="subgroup2" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a> 
 
    </div> 
 

 
    <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> 
 
    <div id="subgroup3" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a> 
 
    </div> 
 

 
    <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> 
 
    <div id="subgroup4" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a> 
 
    </div> 
 

 
</div>

來源

2017-05-05 Pete

你只是改變變量'see'的價值。您需要更新DOM中元素的'style'。使用'document.getElementById（'subGroupId'）。style.display = see ==='none'？ 'block'：'none';'。 – Tushar

我建議你創建一個類'.hide {display：none; }'在CSS中，並使用'.classList.toggle（'hide'）;' – Tushar

切換它的問題是你只是複製一個屬性的值。所以當你更新這個變量時，它不會影響Object中的屬性。 @ Tushar的評論是合適的方式，但如果您不熟悉三元運算符，請嘗試在'if'和'else'中使用'subGroupIdStyle.display'而不是'see'。 – Rajesh

你不是傳遞變量，當你把它包在「在subGroupId」

subGroupIdStyle = document.getElementById(subGroupId).style;

刪除「」，這樣你實際上傳遞變量字符串。

此外，代替see = 'block';做subGroupIdStyle.display = 'block'，其他條件相同。

代碼see = 'block'不起作用，因爲您剛纔複製了subGroupIdStyle.display的值，而您可以使用它來檢查該值，因此當您更改see的值時，它不會更改該值值爲subGroupIdStyle.display。您應該避免使用see，並在該地點使用subGroupIdStyle.display。

function toggleMenuItem(subGroupId) { 
 

 
    subGroupIdStyle = document.getElementById(subGroupId).style; 
 
    var see = subGroupIdStyle.display; 
 

 
    if (see == 'none') { 
 
\t subGroupIdStyle.display = 'block'; 
 
    } 
 
    else { 
 
    subGroupIdStyle.display = 'none'; 
 
    } 
 
};

<div id="content"> 
 
    <p id="title">Computer <br>components</p> 
 
    <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> \t 
 
    <div id="subgroup1" style="display:none;"> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a> 
 
    </div> 
 

 
    <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> \t 
 
    <div id="subgroup2" style="display:none;"> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a> 
 
    </div> \t 
 

 
    <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> \t 
 
    <div id="subgroup3" style="display:none;"> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a> 
 
    </div> \t 
 

 
    <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> \t 
 
    <div id="subgroup4" style="display:none;"> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br> 
 
     &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a> 
 
\t \t \t </div> \t 
 
\t \t \t \t 
 
\t </div>

來源

2017-05-05 06:44:46

請檢查其他答案（* remove quotes *）已被覆蓋。並且替換'see'。請添加解釋爲什麼它不''看' – Rajesh

@Rajesh，是的，我做到了。 –

謝謝！它現在完美運行！在函數的參數周圍纏繞「不能正確傳遞變量，對吧？還是我錯過了什麼？ – Pete

試試這個：

subGroupIdStyle = document.getElementById('subGroupId').style;

變化

subGroupIdStyle = document.getElementById(subGroupId).style;

來源

2017-05-05 06:41:10

更好地利用單線if條件.Variable傳球是wrong.you正在申請字符串而不是傳遞變量。你可以使用這樣的

   document.getElementById(subGroupId)

而且see = 'block';未覆蓋元素style.so你可以使用完整的風格像variable.style.display="block"

function toggleMenuItem(subGroupId) { 
 
    var subGroupIdStyle = document.getElementById(subGroupId); 
 
    subGroupIdStyle.style.display = (subGroupIdStyle.style.display =='none')?'block':'none'; 
 

 
}

<div id="content"> 
 
    <p id="title">Computer <br>components</p> 
 
    <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> 
 
    <div id="subgroup1" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a> 
 
    </div> 
 

 
    <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> 
 
    <div id="subgroup2" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a> 
 
    </div> 
 

 
    <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> 
 
    <div id="subgroup3" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a> 
 
    </div> 
 

 
    <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> 
 
    <div id="subgroup4" style="display:none;"> 
 
    &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a> 
 
    </div> 
 

 
</div>

來源

2017-05-05 06:49:11 prasanth

你有2個錯誤：

1-您不應該在變量中包含變量subGroupId。

2 - 你不能改變DOM的風格：

var see = subGroupIdStyle.display; 
    if (see == 'none') { 
    see = 'block'; 
    } else { 
    see = 'none'; 
    }

使用

subGroupIdStyle.display = 'block';

來源

2017-05-05 06:53:20 Scofield

JavaScript代碼不能正常工作，無法隱藏/顯示div內容

回答

相關問題