菜单子菜单包括链接，图像使用jQuery和slideToggle

在我的网站上我有一个菜单4项，他们是在列表（ul/li）。然后我有4个div。每个div包含图像，链接，文本，并且必须是100％宽度。菜单子菜单包括链接，图像使用jQuery和slideToggle

当鼠标悬停在我的菜单中的第一项时，我想使用slideToggle显示第一个div，（因为我想让我的“内容”div向下滚动），当显示div时，能够在没有div的div再次消失。当div中的Mouseover，Div SlideToggle回来...

我知道如何做点击功能，因为div保持打开，但我正在寻找一个解决方案，使用slideToggle。

这里是我的HTML：

<ul class="main_menu"> 
<li>ITEM 1</li> • <li>ITEM 2</li> • <li>ITEM 3</li> • <li>ITEM 4</li> 
</ul> 

<div id="main_sous_menu" class="bandeau_1"> 
sub Menu 1. Links & Images ... 
</div> 

<div id="main_sous_menu" class="bandeau_2"> 
sub Menu 2. Links & Images ... 
</div> 

<div id="main_sous_menu" class="bandeau_3"> 
sub Menu 3. Links & Images ... 
</div> 

<div id="main_sous_menu" class="bandeau_4"> 
sub Menu 4. Links & Images ... 
</div> 

<div class="content"> 
</div>

我的Jquery：

$("#main_sous_menu.bandeau_1").hide(); 
$("#main_sous_menu.bandeau_2").hide(); 
$("#main_sous_menu.bandeau_3").hide(); 
$("#main_sous_menu.bandeau_4").hide(); 

$(".main_menu li:first-child").hover(
    function() { 
    $("#main_sous_menu.bandeau_1").slideToggle(); 
    } 
); 
$(".main_menu li:nth-child(2)").hover(
    function() { 
    $("#main_sous_menu.bandeau_2").slideToggle(); 
    } 
); 
$(".main_menu li:nth-child(3)").hover(
    function() { 
    $("#main_sous_menu.bandeau_3").slideToggle(); 
    } 
); 
$(".main_menu li:nth-child(4)").hover(
    function() { 
    $("#main_sous_menu.bandeau_4").slideToggle(); 
    } 
);

我的CSS：

.main_menu { 
    font-size: 25px; 
    text-align: center; 
    border-bottom: 1px solid #EEE; 
    padding: 5px 0px; 
} 

.main_menu li { 
    list-style: outside none none; 
    display: inline-block; 
    vertical-align: top; 
} 

.content{background-color:red;height:50px} 
#main_sous_menu { 
    padding-top: 10px; 
    width: 100%; 
    position: relative; 
height:200px; 
background-color:green}

这里是一个的jsfiddle链接，看到它在行动：

http://jsfiddle.net/xjmk1otu/1/

我想我开始使用错误的方法，但我无法找到如何实现这个希望有人可以帮助我这个！

非常感谢

来源

2014-12-02 mmdwc

此时您正在使用悬停功能，因为只针对李坚持使用幻灯片切换中，每当李不徘徊是很正常的，滑回了，到做到这一点，只要ul悬停，就需要触发幻灯片，然后每当li悬停时只显示不同的内容。

来源

2014-12-02 19:19:18 Alin

菜单子菜单包括链接，图像使用jQuery和slideToggle

回答

相关问题