2013-03-13 4 views
2

IAM создания меню аккордеона с JQuery + CSS3 все идет хорошо ожидать, что в меню всегда открывается при загрузке страницы и код, чтобы скрыть это не работает это является скрипкой я создалфункция JQuery не работает

Это мой 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/

ответ

5

Добавьте это правило CSS, чтобы сделать ваш контент аккордеона скрытым по умолчанию:

.zero_menu_content { 
    display: none; 
} 

UPD. Эта версия также будет исправить синтаксическую ошибку в коде:

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

Я также удалил $('.zero_menu_content').hide();, который не нужен, если вы используете решение CSS.

+0

Спасибо так много его работы в настоящее время – Zeroic

+1

Приглашаем Вас! Самое простое решение - лучшее. – dfsq

+1

@dfsq вы решили его с одной ошибкой по-прежнему оставаться в коде ...если вы преодолеете эту ошибку, вам не понадобится css heck. –

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(); не увольняют. Посмотрите на консоль.

2

Узнайте, как открыть консоль JavaScript вашего браузера. Шахта показывает эту ошибку:

Syntax error, unrecognized expression: .

... показываемых по этому коду:

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

Не уверен, как этот код должен выглядеть, но гармошка работает отлично, если удалить весь блок.

1

У вас также есть одна ошибка.

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

Вы получите неопределенное выражение. в консоли. Таким образом, выполнение кода завершено.

+0

Спасибо, я думаю, что весь код нуждается в ремонте – Zeroic

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/

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 ***/ 




}); 

я только положить шкурку() на начиная,

$(document).ready(function(){ 

}); 
Смежные вопросы