Question

单击按钮时，左侧有一个侧面子菜单，对chrome和firefox来说效果很好。但是，对于IE9，过渡不起作用。

我读过的另一种方法是使用Jani动画复制CSS3过渡。我根据阅读的文档进行了以下操作：

$('#menu-toggle').click(function() {
    $('#wrapper').animate({left:'256px'},600);
});

仅当其IE9或更低版本时，才应使用上面的代码。为此，我做了以下工作，这些工作仅针对IE的CSS。下面的代码块在head标签中：

<!--- Sidebar Transition --->
<!--[if lte IE 9]>
    <script src="submenu_transition_ie.js"></script>    
<![endif]-->

侧边栏菜单：

<div id="wrapper">

    <!--- Sidebar --->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
      </ul>
    </div>

我用来显示侧边栏菜单的按钮：

<a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>

我不确定自己在做什么错。

这也是我正在使用的以下js脚本。任何帮助将不胜感激

<!--- Bootstrap core JavaScript --->
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="js/submenu_transition.js"></script>

更新：我能够使动画生效并模拟切换。如果有人感兴趣，以下是我的工作。我知道它不是最优雅的，但是可以用于IE9。

var ua = window.navigator.userAgent; //detects which browser user is on
var msie = ua.indexOf("MSIE"); //if it is any version of IE

if(msie < 0){
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
}

//Mimic Toggle
else{
    var mimicToggle = "expand";
    $(document).ready(function (){
        $("#menu-toggle").click(function(){
            //console.log(mimicToggle); //to check if button is clicked

            if(mimicToggle == "expand"){
                $('#wrapper').animate({'padding-left':'250px'},600);
                mimicToggle = "shrink";
            }
            else{
                $('#wrapper').animate({'padding-left':'-250px'},600);
                mimicToggle = "expand";
            }

        });
    });
}

jQuery Animate在ie9中不起作用

0 个答案: