Как открыть подменю при нажатии?

Question

Это было создано кем-то другим, но некоторые подменю остаются открытыми, а один закрывается при нажатии. У меня есть идея, что я могу сделать, но у меня очень мало знаний о JS. Я думал, если sub5 (идентификатор для подменю, который остается закрытым), «что-то, чтобы сделать это правдой, а затем false, если не sub5» Как это сделать?

HTML

<nav id="rightNav"> 
    <div class="menutitle first" onClick="SwitchMenu('sub1')">fabrics</div> 
    <div id="sub1" class="submenu"> 
     <ul> 
      <li><a href="leejofa_fabrics.htm">lee jofa</a></li> 
      <li><a href="groundworks_fabrics.htm">groundworks</a></li> 
      <li><a href="threads_fabrics.htm">threads</a></li> 
      <li><a href="gpjbaker_fabrics.htm">gp &amp; j baker</a></li> 
      <li><a href="mulberryhome_fabrics.htm">mulberry home</a></li> 
      <li><a href="lifestyle_fabrics.htm">baker lifestyle</a></li> 
      <li><a href="blithfield_fabrics.htm">blithfield</a></li> 
     </ul> 
    </div> 
    <!-- end div#sub1 (fabrics) --> 

    <div class="menutitle" onClick="SwitchMenu('sub2')">furniture</div> 
    <div id="sub2" class="submenu"> 
     <ul> 
      <li><a href="leejofa_upholstery.htm">lee jofa upholstery</a></li> 
      <li><a href="leejofa_occasionals.htm">lee jofa occasionals</a></li> 
      <li><a href="furniture/bunny_williams/bunny_williams.htm">Bunny Williams Home</a></li> 
      <li><a href="../../hollandco.htm">holland &amp; co.</a></li> 
      <li><a href="macrae_furniture.htm">macrae</a></li> 
      <li><a href="elle_and_marks.htm">elle &amp; marks</a></li> 
     </ul> 
    </div> 
    <!-- end div#sub2 (furniture) --> 

    <div class="menutitle" onClick="SwitchMenu('sub3')">wallcoverings</div> 
    <div id="sub3" class="submenu"> 
     <ul> 
      <li><a href="leejofa_wallcoverings.htm">lee jofa</a></li> 
      <li><a href="coleson_wallcoverings.htm">cole &amp; son</a></li> 
      <li><a href="groundworks_wallcoverings.htm">groundworks</a></li> 
      <li><a href="wallcoverings/threads_wallcoverings_variation.htm">threads</a></li> 
      <li><a href="gpjbaker_wallcoverings.htm">gP &amp; j baker</a></li> 
      <li id="blithfield-wall"><a href="wallcoverings/blithfield_wallcoverings_peggy_angus.htm">blithfield</a></li> 
      <li><a href="farrowandball_wallcoverings.htm">farrow &amp; ball</a></li> 
      <li><a href="lincrusta_wallcoverings.htm">lincrusta</a></li> 
     </ul> 
    </div> 
    <!-- end div#sub3 (wallcoverings) --> 

    <div class="menutitle"><a href="leejofa_trimmings.htm">trimmings</a></div> 

    <div class="menutitle" onClick="SwitchMenu('sub5')">carpets</div> 
    <div id="sub5" class="submenu"> 
     <ul> 
      <li><a href="leejofa_carpet.htm">lee jofa carpet</a></li> 
      <li id="gw-carpet"><a href="groundworks_carpet.htm">groundworks</a></li> 
      <li><a href="threads_carpet.htm">threads</a></li> 
     </ul> 
    </div> 
    <!-- end div#sub5 (carpets) --> 

    <div class="menutitle" id="archive-collection"><a href="leejofa_collections.htm">designer collections</a></div> 

    <div class="menutitle last"><a href="leejofa_archive.htm">archives</a></div> 

</nav> 
<!-- end nav#rightNav --> 

JS

if (document.getElementById) { //DynamicDrive.com change 
    document.write('<style type="text/css">\n') 
    document.write('.submenu{display: none;}\n') 
    document.write('</style>\n') 
} 

function SwitchMenu(obj) { 
    if (document.getElementById) { 
     var el = document.getElementById(obj); 
     var ar = document.getElementById("rightNav").getElementsByTagName("div"); //DynamicDrive.com change 
     if (el.style.display != "block") { //DynamicDrive.com change 
      for (var i = 0; i < ar.length; i++) { 
       if (ar[i].className == "submenu") //DynamicDrive.com change 
        ar[i].style.display = "none"; 
      } 
      el.style.display = "block"; 
     } else { 
      el.style.display = "none"; 
     } 
    } 
} 

Answer 1

У вас есть класс и стиль.

Ваш стиль определен в классе, поэтому вы не можете получить к нему доступ с помощью element.style.

Простое решение, чтобы изменить эту строку:

<div id="sub5" class="submenu"> 

к

<div id="sub5" class="submenu" style="display:none;">