1

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

しかし、どのように実装できるかわかりません。トップメニューを作成すると、そのスライドも制御されます。

たとえば、メイン コンテンツで作業アコーディオン ボタンをクリックすると、下にスライドして作業用の添付コンテンツが表示されます...しかし、トップ メニューの「作業」ボタンをリンクして同じように下にスライドさせる方法がわかりません。コンテンツ。

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;
    }
4

2 に答える 2

0

上記のコードをこの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);                
 });

次に、メニュー要素のクリックイベントを同じ関数に接続します。

于 2012-04-18T13:30:57.483 に答える
0

Jquery トリガー機能を使用することもできます。これは、渡したセレクターで特定のイベントをシミュレートします。

5 つのアコーディオン div があるとします。その結果、5 つのメニュー要素ができます。

メニュー要素を配線して、次のようなことを行うだけです。

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

理想的には、利用可能なすべての要素をループして、それらにトリガーをアタッチする必要があります。何かのようなもの：

for(var i=0;i<n;i++)
{
    $("#menuitem"+i).click(function(e){
        $("#accordionLi"+i).trigger("click");
    });
}
于 2012-04-18T14:23:08.353 に答える