Question

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

Answer 1

添加此CSS规则，默认情况下隐藏您的手风琴内容：

.zero_menu_content {
    display: none;
}

UPD。此版本还将修复代码中的语法错误：

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

如果你使用CSS解决方案，我也删除了$('.zero_menu_content').hide();，这是不需要的。

Answer 2

了解如何打开浏览器的JavaScript控制台。我出现了这个错误：

语法错误，无法识别的表达式：。

...由此代码触发：

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

不确定该代码应如何显示，但如果删除完整的块，手风琴的工作正常。

Answer 3

你也有一个错误。

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

您将在控制台中获得未定义的表达式。。所以代码的执行在那里终止。

Answer 4

您有以下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/

Answer 5

//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();。看看控制台。

Answer 6

试试这个，

 $(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(){

});

jquery函数不起作用

6 个答案: