雙導航jQuery的手風琴

Question

我的主要問題是，我想創建jQuery的手風琴爲基礎的網站，點擊手風琴按鈕時，它打開了它的內容。

，但我不知道我是怎麼能實現，當是爲它創建一個頂級菜單上，它還控制它的滑動。

因此，例如：對主要內容，我的工作手風琴點擊button--它滑下並顯示工作附加的內容......但我不知道如何在頂部菜單的「工作」按鈕鏈接到向下滑動相同的內容。

HTML：

<div id="wrapper"> 
    <div class="accordionButton"><img src="work.png" width="666" height="84"></div> 
    <div class="accordionContent"><img src="7.jpg" width="900"></div> 

的jQuery：

$(document).ready(function() { 

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
$('.accordionButton').click(function() { 

    //REMOVE THE ON CLASS FROM ALL BUTTONS 
    $('.accordionButton').removeClass('on'); 

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
    $('.accordionContent').slideUp('normal'); 

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
    if($(this).next().is(':hidden') == true) { 

     //ADD THE ON CLASS TO THE BUTTON 
     $(this).addClass('on'); 

     //OPEN THE SLIDE 
     $(this).next().slideDown('normal'); 
    } 

}); 


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.accordionButton').mouseover(function() { 
    $(this).addClass('over'); 

//ON MOUSEOUT REMOVE THE OVER CLASS 
}).mouseout(function() { 
    $(this).removeClass('over');           
}); 


$('.accordionContent').hide(); 

CSS：

#wrapper { 
width: 1100px; 
margin-left: auto; 
margin-right: auto; 
} 
.accordionButton { 
    width: 900px; 
    float: left; 
    _float: none; 



border-bottom: 1px solid #FFFFFF; 
cursor: pointer; 
} 

.accordionContent { 
    width: 1000px; 
    float: left; 
    padding:20px; 
    _float: none; 
    background: #fff; 
    } 

Answer 1

您還可以使用Jquery的觸發functionality.Which模擬在你傳遞給它選擇一個給定的事件。

比方說你有五個手風琴的div，resultingly你將有5個菜單元素。

剛絲您菜單元素做類似如下：

$("#menuitem1").click(function(e){ 
    $("#accordionLi1").trigger("click"); 
}); 

理想的你應該只是通所有可用的元素循環和附加觸發他們。 類似：

for(var i=0;i<n;i++) 
{ 
    $("#menuitem"+i).click(function(e){ 
     $("#accordionLi"+i).trigger("click"); 
    }); 
} 

Answer 2

我設置代碼上面這個的jsfiddle - http://jsfiddle.net/SZ9pE/。你有手風琴的工作，我不知道你爲什麼不把另一個事件連接到你的菜單元素，也可以上下滑動手風琴。

我會成立所有的手風琴與普通類，所以你可以選擇它們一起控制。當您單擊菜單項，您可以先關閉所有打開的手風琴像這樣的東西......

$('.accordionContent').is(":visible").slideUp(); 

接下來，我將移動代碼打開了一個給定的手風琴成一個共同的功能...

function openContent(btn){ 
    $('.accordionButton').removeClass('on'); 
    $('.accordionContent').slideUp('normal'); 

    $(btn).addClass('on'); 
    $(btn).next('.accordionContent').slideDown('normal'); 
} 
​ 

然後，菜單元素的單擊事件更改按鈕單擊事件使用普通的功能...

$('.accordionButton').click(function(e) { 
    openContent(this);     
}); 

然後，線材達相同的功能。