2016-10-19 1 views
1

Как я могу скрыть и отобразить подменю находится на мыши с помощью прослушивателя событий или установить событие

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"); 
 
     }*/ 
 
    }); 
 
}
ul,li{ 
 
    list-style:none; 
 
    } 
 

 
.side-bar ul{ 
 
    display :none; 
 
}
<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>

в приведенной выше функции я пытаюсь создать меню on click с помощью набора событий, но я не могу найти подходящее решение. Подменю нужно отображать, когда нажимаете на основной элемент. Как я могу исправить его, не изменяя часть html и css?

+0

Что такое используется библиотека? – Teemu

+0

Если вы используете jQuery, тогда есть ответ. http://stackoverflow.com/a/8232214/5788489 –

+0

нет, это не jQuery –

ответ

0

дружище, я думаю, что я получил вас ... пожалуйста, проверьте этот ответ

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'; 
         } 
        } 
      } 
     } 
    }); 
} 
Смежные вопросы