Question

我差不多了，但我无法解决最后一个问题。我正在尝试在Indexhibit页面上使用jquery创建一个简单的下拉菜单。

    $('#menu ul li.section-title').hover(
  function () {  
    $(this).parent().children().show('fast');
  },
  function () {
    $(this).parent().children().not(this).hide('fast');
  }
);

菜单的结构如下所示：

<ul>
<li class="section-title">HEADER which triggers dropdown</li>
<li>element one</li>
<li>element two</li>
<li>element three</li>
</ul>

我希望section-title触发悬停事件，它应该显示所有li-children。到目前为止，这个工作正常。但是导航工作不太顺利，因为我无法选择一个孩子。每当徘徊在部分标题时，整个ul结构再次崩溃。如果我将鼠标悬停在菜单上的每个孩子身上，我该怎么办才能触发悬停？

我希望我不会写到混乱。关于亚光

Answer 1

捕获UL的Hover事件，然后确保将Overflow：hidden样式应用于外部UL。或

<ul><h2>section-title<h2>
    <li>element one</li>
    <li>element two</li>
    <li>element three</li>
</ul>

#menu ul li { display:none }

#menu ul { 
    overflow:hidden
    position:absolute or float:left  <-- Might need this
}

$('#menu ul').hover(
  function () {  
    $(this).children("li").show('fast');
  },
  function () {
    $(this).children("li").hide('fast');
  }
);

jquery下拉简单的问题？

1 个答案: