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

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

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

如果您使用 CSS 解决方案，我还删除$('.zero_menu_content').hide();了不需要的内容。

于 2013-03-13T08:46:52.120 回答
2

了解如何打开浏览器的 JavaScript 控制台。我的显示此错误：

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

...由此代码触发：

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

不确定该代码的外观，但如果您删除完整的块，手风琴可以正常工作。

于 2013-03-13T08:49:55.723 回答
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 回答