Bootstrap 4.1.3下拉菜单在IE11中不起作用-引发异常

时间:2019-01-01 16:53:41

标签: internet-explorer drop-down-menu bootstrap-4

我正在使用Bootstrap 4.1.3和IE11。我创建了一个“模态对话框”,并且“模态对话框”具有下拉菜单。 Dropdown菜单在Google和Edge中可以正常工作,但在IE 11中却不能。我研究并尝试了许多解决方案,包括Stack Overflow中的解决方案,但是没有任何效果。

这是基本的下拉代码:

<!-- Drop Down Menu -->

                <div class="d-flex align-self-end">
                    <ul class="navbar-nav mr-auto"> 
                        <li class="nav-item dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="navbardrop">
                            <img src="Images/KoKoPelli.jpg" class="profile-picture"/>
                        </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Newsfeed</a></li>
                                <li><a class="dropdown-item" href="#">One Drive</a></li>
                                <li><a class="dropdown-item" href="#">Sites</a></li> 
                            </ul>
                        </li>
                    </ul>                    
                </div>

这是具体的下拉代码:

<div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li class="nav-item"> 
                <a class="nav-link menuItem" id="Departments" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Departments</a></li>
            <li class="nav-item"> 
                <a class="nav-link menuItem" id="Resources" data-toggle="modal" data-target="#MyNNSModal"  onclick="showResourceHeader()">Resources</a></li>
            <li class="nav-item"> 
                <a class="nav-link menuItem" id="Procedures" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Procedures</a></li>
            <li class="nav-item"> 
                <a class="nav-link menuItem" id="News" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">News</a></li> 
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link menuItem" id="Newsfeed" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Newsfeed</a></li>
            <li class="nav-item"> 
                <a class="nav-link menuItem" id="OneDrive" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">OneDrive</a></li>
            <li class="nav-item"> 
                <a class="nav-link menuItem" id="Sites" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Sites</a></li>
        </ul>
    </div>    

这是JSFiddle上的整个项目:

https://jsfiddle.net/tsmolskow/aq9Laaew/276201/

1 个答案:

答案 0 :(得分:0)

这是一个Bootstrap错误,很多用户以前都曾遇到过此问题。

此问题的修补程序已经可用。

请参考下面的链接可能会帮助您解决问题。

(1)Collapses not working on IE11 (Object.keys: argument is not an Object)

(2)fix issue related to Object.keys and Dropdown issue #26291