0

このHTMLでメニューを作っています。

<div class="sidemenu-maincat">
    <img src="folder/maincat1.jpg" alt="Main cat1" id="toggle" />
</div>

<div class="sidemenu-subcat">
    <a href="submenu11.html"> - Submenu 11 </a>
</div>
<div class="sidemenu-subcat">
    <a href="submenu12.html"> - Submenu 12 </a>
</div>
<div class="sidemenu-subcat">
    <a href="submenu13.html"> - Submenu 13 </a>
</div>     

<div class="sidemenu-maincat">
    <img src="folder/main-cat2.jpg" alt="Main cat2 /> 
</div>

<div class="sidemenu-subcat">
    <a href="submenu21.html"> > Submenu 21 </a>
</div>
<div class="sidemenu-subcat">
    <a href="submenu22.html"> > Submenu 22 </a>
</div>
<div class="sidemenu-subcat">
    <a href="submenu23.html"> > Submenu 23 </a>
</div>

「sidemenu-subcat」divを非表示にしましたが、「sidemenu-maincat」divで画像を押したときに表示/非表示にします。私はJavascriptでこれをやろうとしましたが、その方法がまったくわかりません。どんな図書館でもやらないようにしたいと思います。

私はすべてのJavascriptを別のドキュメントに保存していますが、これは私の問題を解決するために来た最も近いものです。

function toggling()
{
    if(document.getElementByClassName("hidden").style.display == "none")
    {
        document.getElementByClassName("hidden") = "block";    
    }
    else
    {
        document.getElementByClassName("hidden") = "none"; 
    }
}

function init()
{
    var toggle = document.getElementsByClassName("toggle");
    toggle.onclick = toggling;
}

私はそれがなされるべきことからは程遠いことを知っていますが、それは私が持っている最も近いものです。

4

1 に答える 1

1

私はこの種のものにライブラリを使用することを好みますが、純粋な JavaScript の例をまとめました。おそらくもっと良い方法がありますが。

まず、各サブメニューをその maincat div 内に含め、非表示クラスを指定して、ページの読み込み時に非表示にする必要があります。

実施例

.sidemenu-subcat.hidden {
    display: none;  
}

var sideMenuOptions = document.getElementsByClassName('sidemenu-maincat');
for (var i = 0; i < sideMenuOptions.length; i++) {
  sideMenuOptions[i].addEventListener('click', function() {
    var subMenuItems = this.getElementsByClassName('sidemenu-subcat');
    for (var s = 0; s < subMenuItems.length; s++) {
      var subItem = subMenuItems[s];
      // if the element is not visible it's offsets will be 0
      if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
        subItem.className = 'sidemenu-subcat';
      } else {
        subItem.className = subItem.className + ' hidden';
      }
    }
  });
}
于 2013-01-10T17:27:21.993 に答える