0

这是我的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();
})

演示

4

2 回答 2

0

因为它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>

ul注意包含Sub_child1元素的额外内容

于 2013-10-25T08:10:07.810 回答
-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
于 2013-10-25T06:15:34.867 回答