Question

我正在从头开始编码我的网站，而且我遇到了障碍。我无法使用此Bootstrap 4框架获取此下拉菜单。下拉菜单是移动设备或更小屏幕的替代选择...用于较大设备的版本具有完全不同的html，在下面的模拟中。

我还发现我的初始加载内容没有显示在移动设备上？我不知道这是来自我的ajax代码还是其他什么。

您可以查看网站以进行测试 https://trillumonopoly.com/testing/

<nav class="navbar navbar-light bg-dark fixed-top nav2"  style="background-color:#202020!important;" height="30" >

<div class="dropdown show d-block d-xl-none">
  <a class="btn btn-secondary dropdown-toggle" style="color: #202020" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    menu
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <ul id="navMenu">
                        <li><a href="home"><span>HOME</span></a></li>
                        <li><a href="artist"><span>TALENT</span></a></li>
                        <li><a href="services"><span>SERVICES</span></a></li>
                        <li><a href="music"><span>MUSIC</span></a></li>
                        <li><a href="shop"><span>BEATS</span></a></li>
                        <li><a href="media"><span>VIDEOS</span></a></li>
                        <li><a href="contact"><span>CONTACT US</span></a></li>
                    </ul>
  </div>
</div>

  <img src="img/logo.png" class="img-responsive d-none d-md-block" height="30" width="30"><div class="row"><div class="col-md-10">ILLUMONOPOLY</div></div>
</nav>
        <div class="container2 d-none d-md-block">
            <div class="menu-wrap container-fluid">
                <nav class="menu">
                    <div class="link-list container-fluid scrollx">
                        <center> 
                        <ul id="navMenu">
                        <li><a href="home"><span>HOME</span></a></li>
                        <li><a href="artist"><span>TALENT</span></a></li>
                        <li><a href="services"><span>SERVICES</span></a></li>
                        <li><a href="music"><span>MUSIC</span></a></li>
                        <li><a href="shop"><span>BEATS</span></a></li>
                        <li><a href="media"><span>VIDEOS</span></a></li>
                        <li><a href="contact"><span>CONTACT US</span></a></li>
                        </ul>
                        </center>
                    </div>

                </nav>
            </div>
            <button class="menu-button" id="open-button"><img src="img/menu3.png" height="42" width="42"><span>Open Menu</span></button>
                <div class="container-fluid"> 
                    <div id="main">

                    </div>
                </div>
        </div><!-- /container -->

这也是我的Ajax / jQuery代码：

$(document).ready(function () {
    $('#main').load('pages/home.php');

        $('ul#navMenu li a').click(function() {
            var page = $(this).attr('href');
            $('#main').load('pages/' + page + '.php');
            return false;
        }); 

});

Answer 1

你的问题是你在包含jQuery之前包含了Bootstrap的JS文件，就像它在控制台中所说的那样：Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

首先包含jQuery，之后只包含Bootstrap的JS文件。它应该解决你的问题。

Bootstrap 4下拉菜单没有掉线

1 个答案: