Question

＆＃13;

if ($C.getElement(".side-bar")) {
    $C.setEvent("click",".side-bar",function() {
        var x = this.childElementCount;
        alert(x);
        if ( x == 2){
            var y =        this.selectAllChildren.className;
            alert(y);
        }
        /*if(Ele.style.display == "block"){
            Ele.style.display = "none";
            //alert("bro...it works,you dont see me?,i'm inside if loop");
        }
        else {
            Ele.style.display = "block";
            //alert("bro...i'm working fine");
        }*/
    });
}

＆＃13;

ul,li{
  list-style:none;
  }

.side-bar ul{
  display :none;
}

＆＃13;

<html>
  <ul>
    <li class="side-bar">Menu title 1
      <a>  </a>
      <ul> 
        <li>item 11 </li>
         <li>item 12 </li>
         <li>item 13 </li>
      </ul>
    </li>
    <li class="side-bar">Menu title 2
      <a> </a>
      <ul> 
        <li>item 21 </li>
         <li>item 22 </li>
         <li>item 23 </li>
      </ul>
    </li>
  </ul>
 </html>

＆＃13;

在上面的函数中我尝试使用set事件创建菜单on click，但我找不到合适的解决方案。点击主项目时需要显示子菜单。我能修复它而不改变html和css部分吗？

Answer 1

伙计，我想我找到了你...请检查这个答案

if ($C.getElement(".side-bar")) {
    $C.setEvent("click",".side-bar",function() {
        if ( this.childElementCount == 2){
            var nodes = this.childNodes;
            for(var i=0; i<nodes.length; i++) {
                if( nodes[i].className == 'nav nav-second-level')//if `you want to check a perticular class name paste it here`
                    {
                        if(nodes[i].style['display'] === 'block')
                            { 
                                nodes[i].style.display = 'none';
                            }
                        else{
                                nodes[i].style.display= 'block';
                        }
                    }
            }
        }
    });
}

如何使用事件监听器或设置事件隐藏和显示子菜单

1 个答案: