菜單子菜單包括鏈接，圖像使用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

回答

相關問題