只显示子菜单中单击父菜单

Question

后这是我的HTML代码

<ul class="dd-options"> 
    <li> 
     <a class="dd-option"><label class="dd-option-text">Main_parent1</label></a> 
    </li> 
    <li> 
     <a class="dd-option"> 
     <label class="dd-option-text">- Main_child1</label> 
     </a> 
    </li> 
    <li> 
     <a class="dd-option"> 
     <label class="dd-option-text">- Main_child2</label> 
     </a> 
    </li> 
    <li class="minus"> 
     <a class="dd-option"> 
     <label class="dd-option-text">-- Sub_child1</label> 
     </a> 
    </li> 
    <li> 
     <a class="dd-option"> 
     <label class="dd-option-text">Main_parent2</label> 
     </a> 
    </li> 
    <li> 
     <a class="dd-option"> 
     <label class="dd-option-text">- Main_child3</label> 
     </a> 
    </li> 
</ul> 

输出

Main_parent1 
    - Main_child1 
    - Main_child2 
    -- Sub_child1 
Main_parent2 
    - Main_child3 

第一次我的输出应（已完成）

Main_parent1 
Main_parent2 

如果我有悬停Main_parent菜单它打开Main_child和Sub_child。但我想如果悬停Main_parent只应该打开Main_child。如果点击Main_child 应打开Sub_child。

jQuery代码

jQuery('.dd-options .dd-option-text').filter(function() { 
    return jQuery.trim(jQuery(this).text())[0] == '-'; 
}).closest('li').hide().addClass('minus'); 

jQuery('.dd-options > :not(.minus)').hover(function() { 
    jQuery(this).nextUntil(':not(.minus)').show(); 
}, function() { 
    jQuery(this).nextUntil(':not(.minus)').hide(); 
}) 

Demo

Answer 1

you can handle this from css also 

like 

parnet:hover ul(1) { display:block;} 
ul(1):hover ul{2}{ display:block;} 

HTML 

would be 

<ul> 
    <li>first 
     <ul> 
       <li>fisrt sub child</li> 
       <li></li> 
     </ul> 
    </li> 


</ul> 


no need to write jquery or javascript like and u can google also css drop down menu 

Answer 2

它怎么一回事，因为Sub_child1是主要ul元素的孩子，你需要为你的子菜单创建一个单独的ul：

<ul class="dd-options"> 
    <li> 
    <a class="dd-option"><label class="dd-option-text">Main_parent1</label></a> 
    </li> 
    <li> 
    <a class="dd-option"> 
    <label class="dd-option-text">- Main_child1</label> 
    </a> 
    </li> 
    <li> 
    <a class="dd-option"> 
    <label class="dd-option-text">- Main_child2</label> 
    </a> 
    </li> 
    <ul> 
    <li class="minus"> 
     <a class="dd-option"> 
     <label class="dd-option-text">-- Sub_child1</label> 
     </a> 
    </li> 
    </ul> 
    <li> 
    <a class="dd-option"> 
    <label class="dd-option-text">Main_parent2</label> 
    </a> 
    </li> 
    <li> 
    <a class="dd-option"> 
    <label class="dd-option-text">- Main_child3</label> 
    </a> 
    </li> 
</ul> 

请注意包含Sub_child1元素的额外ul