Question

我现在已经使用堆栈一段时间了，大部分时间我都找到了我需要的解决方案或者有助于解决我的问题的解决方案，但是对于这种情况我无法使其工作。< / p>

我正在为我的最终项目建立一个网站，因为我正在学习＆＃34; Web应用程序开发＆＃34;西班牙的专业组建模块。考虑到响应式设计，我结束使用Bootsrap，我发现我自己的JS代码禁用了Bootstrap下拉Nav。

澄清：我正在使用完整的jquery，因为我需要.load()无法让iframe显示完整的八个内容，解决方案正在加载div元素中的另一个文件，可以在小屏幕上正确调整大小。

Functions.php是一种帮助我放弃一些功能的地方，在这种情况下读取数据库并为下拉菜单生成项目

是的，我想在其中加载其他文件，如果你知道如何让iframe显示所有内容并在bootstrap中正确调整大小告诉我，我的工作是jquery + divs它有点工作......

php代码生成菜单时效果很好（我可以看到firefox代码检查器中的所有元素）

HTML （这是一个php文件... index.php）：

  <?php
include 'functions.php';
?>
<!DOCTYPE html>
<html>
<head>
    <title>Project B.W.A.S.T</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!-- TOP menu -->
    <div class="top_navbar">
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <!-- Web logo -->
            <!-- Button for collapsing the navbar -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible_nav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Navbar collapsable on small devices -->
            <div class="collapse navbar-collapse" id="collapsible_nav">
                <ul class="navbar nav">
                    <!--  MAIN INDEX/HOME -->
                    <li class="nav-item dropdown">
                      <a class="btn btn-secondary dropdown-toggle" type="button" id="navbardrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        CHAMPIONS
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbardrop">
                        <?php 
                            $champions= list_champions();
                            foreach ($champions as $row) { 
                        ?>
                        <a id="champion_menu_button" class="dropdown-item" href="#"> <?php echo $row['name']; ?> </a>
                        <?php } ?>
                      </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

        <!-- MAIN CONTENT -->
    <div id="main_space" class="pt-2 pb-2 m-0 ">
    </div>

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MyjS -->
<script src="mainWindowJS.js" defer async></script>

</body>
</html>

Javascrip ＆＃34; mainWindowJs.js＆＃34;

$("document").ready(function(){
     $("div#main_space").load("main_content.php");
});

按顺序导入和自己的JS加载，下拉菜单永远不会打开，但删除我的JS代码会使下拉列表工作。

问题很简单：如何解决这些问题？！，严重的我被卡住了。

Answer 1

所以问题实际上并不在内容上。

如前所述我使用的是iframe，我必须在将要显示在框架上的内容中加载所有bootstrap css jQuery等。由于我正在交换div，内容实际上已经加载到同一页面。

所以我在主页上进行了双重导入。双重加载jQuery，Popper和Bootstrap的JavaScript。

删除其中一个可以解决问题。

使用JQuery后，Bootstrap 4 Dropdown被禁用

1 个答案: