Question

我需要一些帮助。基本上我已经使用JQuery和css的组合创建了一个菜单栏，并且它没有折叠或隐藏它在Safari中的应用方式（我使用的是6.1.6）。

我先从代码开始

CSS代码

#menuHolder
{
    width:200px;
    height:30px;
    background:#CCC;
    position:fixed;
    top:10px;
    border: thin ridge #333;
}

#menuItem1
{

    margin:0.15em;
    display:table;
    float:left;
    width:150px;
    height:25px;
    background:#666;

}



#menuDiv
{
    background-color:#FFF;
    height:100px;
    width:150px;

    opacity:1;
    visibility:hidden;



    -webkit-transition: all 0.5s ease-out-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    position:absolute;
    top:34px;
    margin-left:.1em;   
}




#menuItem1:hover
{   
    background:#06F;

}


#menuItem1:hover #menuDiv
{
    opacity:1;
    visibility:visible;

    background-color:#F00;


    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;        
}

#menuContents
{
    font-size:10px;


}


.ui-menu 
{
   width: 150px;     
}

HTML

<body>


<div id="menuHolder">

<div id="menuItem1">
    Menu 1    
    <div id="menuDiv">

        <ul id="menuContents">

               <li>Main Menu 1
                    <ul>
                        <li>Mid Menu 1
                            <ul>

                                <li>Sub Menu 1.1</li>


                                <li>Sub Menu 1.2</li>

                            </ul>
                        </li>
                   </ul>
               </li>
         </ul>

    </div>

</div>

</div>

</body>

的Javascript

$(function() {
    $( "#menuContents" ).menu();
});

问题

从代码中可以看出，当鼠标指针转到menuItem1 div时，它将突出显示div并取消隐藏包含jQuery menuContents的menuDiv。这一切都很好，直到你点击任何子菜单项。

在其他浏览器（Opera，Mozilla，Chrome）中，当您单击子菜单时，菜单会正常折叠，menuDiv会消失，而menuItem1会突然显示。在Safari中，mid和子菜单逐渐消失，但menuDiv永远不会消失，而menuItem1仍然会突出显示，就像仍然有一个鼠标指针触发css一样。

我不确定这是CSS问题，jQuery问题还是浏览器版本问题。任何帮助或指导将不胜感激。

Answer 1

当我升级到优胜美地时，看起来这个问题已经解决了，这意味着它毕竟是一个Safari问题。所有菜单都正常崩溃，没有任何问题。 -

jQuery菜单没有在Safari中折叠

1 个答案: