ダブルナビゲーションjqueryアコーディオン

Question

私の主な問題は、アコーディオンのボタンがクリックされるとjqueryでアコーディオンベースのウェブサイトを作成してコンテンツを開きたいということです。

しかし、私はどのように実装することができないのか、それについてのトップメニューを作成するときに、そのスライディングを制御することはできません。

例えば、メインコンテンツでは、私は作品のアコーディオンボタンをクリックします。スライドして作品の添付されたコンテンツを表示します...しかし、トップメニューの「仕事」ボタンをリンクする方法はわかりません。その同じ内容をスライドさせます。

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：私はこのjsFiddleに上記のコードを設定し

#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トリガ機能を使用することもできます。セレクタで渡された特定のイベントをシミュレートします。

5つのアコーディオンのdivがあるとします。その結果、5つのメニュー要素があります。以下のように

だけワイヤーあなたのメニュー要素は何かをする：

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

理想は、あなただけの利用可能なすべての要素スルーループおよびそれらにトリガを添付しなければなりません。あなたはこの問題のために一緒に[jsFiddle]（http://jsfiddle.net/）を置く場合は、より多くの幸運な応答を取得している場合があります

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

Answer 2

から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);     
}); 

...一般的な機能を使用するには、ボタンのクリックイベントを変更します。