2

jquery + css3でアコーディオンメニューを作成しています。ページの読み込み時にメニューが常に開き、それを非表示にするコードが機能しないことを期待してください。これは私が作成したフィドルです

これは私のjqueryコードです

   $(document).ready(function() {

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

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

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.zero_menu_content').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 
    $('.').mouseover(function() {
        $(this).addClass('over');

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

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


    /********************************************************************************************************************
    CLOSES ALL S ON PAGE LOAD
    ********************************************************************************************************************/   
    $('.zero_menu_content').hide();

});

これは完全なフィドルです

http://jsfiddle.net/YU6nZ/

4

6 に答える 6

5

この CSS ルールを追加して、デフォルトでアコーディオン コンテンツを非表示にします。

.zero_menu_content {
    display: none;
}

アップデート。このバージョンでは、コードの構文エラーも修正されます。

http://jsfiddle.net/dfsq/YU6nZ/15/

$('.zero_menu_content').hide();CSS ソリューションを使用する場合に不要なものも削除しました。

于 2013-03-13T08:46:52.120 に答える
2

ブラウザのJavaScriptコンソールを開く方法を確認してください。鉱山はこのエラーを示しています：

構文エラー、認識されない式：。

...このコードによってトリガーされます：

$('.').mouseover(function() {
  ^^^

そのコードがどのように見えるかはわかりませんが、ブロック全体を削除するとアコーディオンは正常に機能します。

于 2013-03-13T08:49:55.723 に答える
1

あなたにも1つのエラーがあります。

$('.').mouseover(function() {
    $(this).addClass('over');
}).mouseout(function() { $(this).removeClass('over'); });

未定義の式が得られます。コンソールで。そのため、コードの実行はそこで終了しました。

于 2013-03-13T08:52:28.127 に答える
1

次の JavaScript エラーがあります。

Uncaught Error: Syntax error, unrecognized expression: .

引っ越し時：

$('.').mouseover(function() {
    $(this).addClass('over');

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

次のようにする必要があります。

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

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

正しいフィドル: http://jsfiddle.net/YU6nZ/12/

于 2013-03-13T08:52:48.593 に答える
0 
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.').mouseover(function() {
    $(this).addClass('over');

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

これにより JS エラーが発生するため、発生し$('.zero_menu_content').hide();ません。コンソールを見てください。

于 2013-03-13T08:48:38.007 に答える
0

これを試して、

 $(document).ready(function() {
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/   
$('.zero_menu_content').hide();

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

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

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.zero_menu_content').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 
$('.').mouseover(function() {
    $(this).addClass('over');

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

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




});

私はあなたの hide() を先頭に置きました。

$(document).ready(function(){

});
于 2013-03-13T08:59:23.697 に答える