CSS / Jquery显示隐藏子菜单 [英] CSS/Jquery to show hide submenu

问题描述

仍然试图找出jQuery和我需要一些帮助边栏列表。

我正在尝试一些东西后编辑这个。

我试图隐藏子菜单，列表项被鼠标悬停，则另一个菜单显示在侧边栏的侧面，您可以将鼠标悬停在这些选择上。我有一半，但是当你mouseout它消失之前，你可以鼠标悬停任何项目。我将添加hoverIntent但我不认为这是问题，因为我需要整个隐藏块也是一个触发器来显示该元素。我尝试了下面的Steerpikes解决方案，但它导致整个主列表在鼠标出来后消失。

以下是现在的结构：

 < ul& 
< li>始终显示元素< / li> 
< li class =trigger>触发子菜单的标题
< ul> 
< li> 
隐藏菜单
< / li> 
< / ul> 
< / li> 
< / ul> 
  

和脚本

  $（'li.trigger ul'）。hide（）; 
 $（'li.trigger'）。hover（function（）{
 $（'li.trigger ul'）。show（）; 
}，
 function {
 $（'li.trigger ul'）。hide（）; 
}）; 
  

那么，当我的鼠标移到li.trigger ul li元素上时， / p>

感谢您的帮助！

Nevermind ...这个工作现在，但现在它重叠一点，与hoverintent添加一点延迟没有问题。

解决方案

以下是应该工作。 3分钟前我就写了类似的东西：）

 < ul id ='menu' 
< li>< a href =>始终显示< / a>< / li> 
< li>< a href =>始终显示子菜单的标题< / a> 
< ul> 
< li>< a href =>隐藏，直到将鼠标悬停在标题< / a>< / li> 
< / ul> 
< / li> 
 
 $（'＃menu li'）hover（function（）{
 $（this）.find（'ul'）。show（）; 
}，
 function（）{
 $（this）.find（'ul'）。hide（）; 
}）; 
  

请记住， hover（） 有两个参数 - 鼠标移动时会发生什么，鼠标移动时发生什么。

still trying to figure out jQuery and I need some help with a sidebar list.

I am editing this after trying some stuff.

I am trying to have the submenu hidden until a specific list item is moused over, then another menu appears to the side of the sidebar and you are able to mouse over those selections. I am halfway there but when you mouseout it disappears before you can mouseover any of the items. I will add hoverIntent but I do not think that is the problem as I need that whole hidden block to also be a trigger to show that element. I tried Steerpikes solution below but it caused the entire main list to disappear after mouse out.

Here is the structure now:

<ul>
<li>Always Showing Element</li>
<li class="trigger">Title that triggers Submenu
<ul>
<li>
Hidden Menu
</li>
</ul>
</li>
</ul>

and the script

$('li.trigger ul').hide();
 $('li.trigger').hover(function() {
$('li.trigger ul').show();
},
function() {
      $('li.trigger ul').hide();
});

So how can I keep it showing while my mouse are over the li.trigger ul li elementes?

Thanks for the help with this!

Nevermind... this works now, I just had the positioning off but now it overlaps a bit and with hoverintent adding a little delay there is no problem.

解决方案

The follwing should work. I just wrote something similar 3 minutes ago :)

<ul id='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>

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

Remember that hover() takes two arguments - what happens when you mouse in and what happens when you mouse out.

这篇关于CSS / Jquery显示隐藏子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！