Question

我正在尝试使用jQuery UI滑入/滑出菜单，我似乎无法在任何版本的Internet Explorer中使用它。

我正在使用一些条件来稍微修改IE的代码，但它只是“悬停”事件和“点击”之间的区别。它在所有其他浏览器中完美运行，但在IE中中断。

您可以在http://actionfreightinc.kemdev.com/

看到该网站

我正在尝试修改显示在旋转图像左侧的菜单。

值得注意的是，当我尝试剥离各种元素时，它似乎开始工作，当我删除LI项目并离开链接。

全部谢谢！

以下是我的各种代码......

Javascript（适用于IE）：

jQuery(document).ready(function() {
    jQuery('#arrow').click(function(){
        jQuery(this).hide('slide',{direction:'left'},200, function() {
            jQuery('.menu-main-container').show('slide',{direction:'left'},500);
            jQuery('.menu-main-container li a').show();
        });
    });
jQuery('.menu-main-container').mouseleave(function(){
    jQuery('.menu-main-container').hide('slide',{direction:'left'},500, function(){
        jQuery('#arrow').show('slide',{direction:'left'},200);
        });
    });
});

这是它试图采取行动的HTML（仅限于一个LI）：

<div id="home-nav">
    <div id="arrow" style="display: block; ">
        <img src="http://actionfreightinc.kemdev.com/wp-content/themes/thesis_18/custom/images/menu2.png" alt="Menu">
    </div>
    <div class="menu-main-container" style="display: none; ">
<ul id="menu-main" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-5"><a href="/">Home</a></li>
</ul></div>                
    <div class="clear"></div>
</div>

这是我的CSS（从其他领域应用了一些其他规则，但这是它的要点）：

        .custom #home-nav {
        margin: 0;
        padding: 20px 0 20px 0;
        position: absolute;
        left: 10px;
        top: 50px;
        z-index: 600;
    }

    .home .menu-main-container {
        background: transparent url(images/home-nav-bgd.png) no-repeat right bottom;
        margin: 0;
        display: none;
        width: 200px;
        /*float: left;*/
        padding-bottom: 20px;
        padding-right: 0;
        padding-left: 0;
        padding-top: 0;
        z-index: 601;
        position: absolute;
        left: 0;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    behavior: url(PIE/PIE.htc);
    }
    .home .menu-main-container #menu-main {
        background: transparent url(images/home-nav-bgd.png) no-repeat right top;
        padding: 20px 20px 0 20px;
        margin: 0;
        width: 160px;
        z-index: 602;
    }
    .home .menu-main-container #menu-main a {
        width: 140px;
        font-size: 1.6em;
    }

    .home #arrow {
        position: absolute;
        left: 0;
        background: none;
        width: 38px;
        height: 255px;
        display: block;
        padding: 0;
        cursor: pointer;
    }

    .custom #home-nav .sub-menu {
        left: 140px;
        top: 0;
        background: #FFF;
        padding: 20px;
        width: 140px;

    -webkit-box-shadow: 0px 0px 4px 0px #000000;
    -moz-box-shadow: 0px 0px 4px 0px #000000;
    box-shadow: 0px 0px 4px 0px #000000;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    behavior: url(PIE/PIE.htc);
    }
    .custom #home-nav #menu-main .sub-menu li a {
        width: 140px;
    }

Answer 1

查看控制台中的布局选项卡。主菜单容器有0高度和0宽度。你所看到的只是溢出。尺寸标注可能会有所帮助

jQuery UI显示/隐藏幻灯片在IE中不起作用

1 个答案: