如何滑动菜单的toggle（）部分？

Question

Suppose I have a list menu: 假设我有一个列表菜单：

<html>
<body>
  <div id="menu">
  <ul>
      <li>News
          <ul class="inner_menu">
              <li>Hi</li>
          </ul>
      </li>
      <li>Bumble
          <ul class="inner_menu">
              <li>Hellos</li>
          </ul>
      </li>
      <li>Scratch</li>
      <li>Snap</li>
  </ul>
</div>
</body>
</html>

And I want all unordered lists be hidden but slidedown/up (jquery slideToggle()) if you hover above the 'li' element in which they are nested. 我想隐藏所有无序列表，但是如果将鼠标悬停在嵌套它们的'li'元素上方，则可以向下滑动/向上滑动（jquery slideToggle（））。 I am having problems with selecting the right elements. 我在选择正确的元素时遇到问题。 Eg I want to slideToggle() .inner_menu with 'Hi' when I hover above "News". 例如，当我将鼠标悬停在“新闻”上方时，我想使用“ Hi”来滑动slideToggle（）.inner_menu。

So far I have been able to slideToggle() all of the .inner_menus or get different unwanted results. 到目前为止，我已经能够对所有.inner_menus进行slideToggle（）或获得不同的不需要的结果。 I think I can just add bunch of different 'id's but that would be just so messy, considering two similar menus with a lot of inner_menus. 我想我可以添加一堆不同的'id'，但是考虑到两个相似的菜单，其中包含很多inner_menus，这太混乱了。

Answer 1

You could use hover in/out handler: 您可以使用hover输入/输出处理程序：

DEMO jsFiddle 演示jsFiddle

$('li').hover(function(){
    $(this).children('ul').slideToggle();
});

如何滑动菜单的toggle（）部分？

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-04-04 15:49:20

DEMO jsFiddle 演示jsFiddle

如何滑动菜单的toggle（）部分？

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-04-04 15:49:20

DEMO jsFiddle 演示jsFiddle

解决方案1
4 已采纳 2014-04-04 15:49:20